Псевдокласи Дій Користувача

Примітка

Ми розглянемо найбільш корисні псевдокласи станів (hover, focus, active і visited).

Псевдоклас :hover

Псевдоклас :hover використовується для реагування на дії користувача, коли він взаємодіє з елементом за допомогою вказівника, наприклад, наведення вказівника миші на елемент. Ми можемо протестувати це у наступному прикладі, навівши вказівник миші на елементи button та a, щоб побачити ефект.

Pseudo-class :hover

The :hover pseudo-class is used to respond to user actions when they interact with an item using a pointing device, such as hovering the mouse pointer over the item. We can test this out in the following example by hovering over the button and a elements to see the effect.

Різниця між :hover та :focus

• :hover реагує на наведення курсору миші;
• :focus реагує на активність клавіатури (клавіша "Tab");

У наступному прикладі ми маємо один і той самий елемент з різними псевдокласами. Зверніть увагу на файл index.css. Можна помітити, що ми можемо додати однакові стилі для ефекту наведення і фокусування, розділивши селектор і псевдоклас за допомогою ,.

In the following example, we have the same element with different pseudo-classes. Please pay attention to the index.css file. We can notice that we can add the same styles for the hover and focus effect by separating the selector and pseudo-class with ,.

Pseudo-class :active

:active is triggered when an item is activated, for example, clicking on a link. Although any element can be activated, this pseudo-class is generally used for links and buttons.

Pseudo-class :visited

:visited pseudo-class is applied to links that have been visited. By default, links are displayed in blue and changed to purple when visited.