CSS-псевдокласи стану елементів: :hover, :focus та :active

Привіт:) У цій статті розповім для чого використовуються псевдокласи CSS :hover, :focus та :active стану HTML-елементів у процесі верстки сторінок сайту. Розгляну відмінності станів HTML-елементів, які з них важливо виділяти, та як це впливає на доступність сайту.

Ці псевдокласи задають елементам стан, який визначається при певних діях відвідувача сайту. Наприклад, стани змінюють колір або розмір елемента, додають йому рамку, роблячи його інтерактивнішим, виділяють візуально та вказують на його призначення.

Основні стани інтерактивних елементів

Є 3 основних стани.

:hover

Спрацьовує, коли користувач наводить курсор на елемент. Зазвичай використовують щоб створити ефект взаємодії з елементом. Наприклад, при наведенні курсору миші на посилання змінюється колір його тексту.

:hover може перевизначатися іншими псевдокласами, що відносяться до посилань, такими як :link, :visited і :active.

Веб-розробники використовують такий підхід для виділення посилань у вмісті публікації, підсвічування пунктів головного меню сайту. В результаті користувач інтуїтивно розуміє, що на такий елемент можна натиснути і отримати певний результат.

<nav class="nav">
  <ul class="nav__list">
    <li><a class="nav__link" href="#">Головна</a></li>
    <li><a class="nav__link" href="#">Про нас</a></li>
    <li><a class="nav__link" href="#">Контакти</a></li>
  </ul>
</nav>
.nav__link {
  color: #000000;
}

.nav__link:hover {
  color: red;
}
до змісту ↑

:focus

Спрацьовує при натисканні на елемент або переході на нього з клавіатури за допомогою клавіші [Tab]. Застосовується до всіх інтерактивних елементів (<button>, <a>, <input>, <select>) і елементів з tabindex.

Існує також стан :focus-visible, який виникає виключно при фокусі з клавіатури. Він покращує доступність сайту для користувачів з обмеженими можливостями. Якщо людина переміщується між розділами сайту за допомогою клавіатури, їй важливо розуміти, де вона знаходиться. Тому стан фокусу рекомендується робити якомога помітнішим.
<nav class="nav">
  <ul class="nav__list">
    <li><a class="nav__link" href="#">Головна</a></li>
    <li><a class="nav__link" href="#">Про нас</a></li>
    <li><a class="nav__link" href="#">Контакти</a></li>
  </ul>
</nav>
.nav__link {
  color: #000000;
}

.nav__link:focus {
  color: green;
}
до змісту ↑

:active

Стан :active спрацьовує, коли користувач взаємодіє з елементом. Наприклад, коли утримує кнопку миші на елементі. Часто використовується для створення ефекту натискання на кнопку або посилання. Псевдоклас :active може не сильно відрізнятися за кольором, тому що користувач знає, з яким елементом взаємодіє.

Псевдоклас :active частіше використовується з елементами <a> та <button>, але може застосовуватися і до інших елементів (наприклад, елементів форм).

Цей стан може бути перевизначений будь-якими іншими псевдокласами, що відносяться до посилання (:link, :hover, :visited).

Щоб стилізувати потрібні посилання, потрібно ставити правило :active після всіх інших правил, що відносяться до посилання, як визначено правилом LVHA-порядку:

:link:visited:hover:active.
<nav class="nav">
  <ul class="nav__list">
    <li><a class="nav__link" href="#">Головна</a></li>
    <li><a class="nav__link" href="#">Про нас</a></li>
    <li><a class="nav__link" href="#">Контакти</a></li>
  </ul>
</nav>
.nav__link {
  color: #000000;
}

.nav__link:active {
  color: yellow;
}
до змісту ↑

Як стани впливають на доступність сайту

Не всі користувачі використовують мишу, тому важливо, щоб сайтом можна було переміщуватися за допомогою клавіатури або інших альтернативних пристроїв.

Рекомендується обов'язково вказувати стани :hover, :focus та :active для всіх інтерактивних елементів, з якими взаємодіє користувач. Це дозволяє створити для нього доступний та зрозумілий інтерфейс, завдяки чому відвідувач довше пробуде на сайті та повернеться.

У формах зворотного зв'язку псевдоклас :focus виділяє активне поле при навігації за допомогою клавіатури. Це допомагає користувачам з обмеженими можливостями коректно заповнювати форму.

Коли стани елементів розрізняються, користувачеві легше зрозуміти де посилання, а де зараз знаходиться фокус. Посиланням краще вказувати різні кольори для :hover і :active, щоб користувач міг відрізнити, який елемент обрав.

Тому прописувати всі стани разом не завжди гарна ідея:

.nav__link:hover,
.nav__link:focus,
.nav__link:active {}

Крім того, у різних браузерах та операційних системах відображення станів може відрізнятися, тому такий код не працюватиме ідеально. Краще розділяти стани та кожен з них стилізувати окремо:

.nav__link:hover {}
.nav__link:focus {}
.nav__link:active {}

Також стани елементів можуть використовуватися для створення ефектів анімації та візуальних змін на сайті. Наприклад, при наведенні на картинку товару можна збільшити її розмір або додати ефект тіні.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *