:hover, :focus, :active, или зачем указывать состояния элементам
- 28 апреля 2023
CSS-псевдоклассы :hover
, :focus
и :active
задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.
В статье рассмотрим, в чём различия состояний, какие элементы важно выделять и как это влияет на доступность сайта.
Основные состояния интерактивных элементов
:hover
Состояние :hover
срабатывает, когда пользователь наводит курсор на элемент. Часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат.
<a class="link" href="#">Меню</a>
.link {
color: #000000;
}
.link:hover {
color: #00B3FF;
}

:focus
Состояние :focus
срабатывает при клике на элемент или переходе на него с клавиатуры при помощи клавиши tab
. Применяется состояния ко всем интерактивным элементам — <button>
, <a>
, <input>
, <select>
и элементам с tabindex
.
Существует также состояние :focus-visible
, которое возникает исключительно при фокусе с клавиатуры. Это состояние улучшает доступность сайта для пользователей с ограниченными возможностями. Если человек перемещается по интерфейсу с помощью клавиатуры, ему важно понимать, где он находится. Поэтому состояние фокуса рекомендуется делать как можно более заметным.
<ul>
<li><a class="link" href="#">Меню</a></li>
<li><a class="link" href="#">О компании</a></li>
</ul>
.link {
color: #000000;
}
.link:focus {
color: #00e48c;
border: 1px solid blue;
}

:active
Состояние :active
срабатывает, когда пользователь взаимодействует с элементом, например, когда удерживает кнопку мыши на элементе. Часто используется для создания эффекта «нажатия» на кнопку или ссылку. :active
может не сильно отличаться по цвету, так как пользователь знает, с каким элементом взаимодействует.
<a class="link" href="#">Главная</a>
.link {
color: #000000;
}
.link:active {
color: #ea5454;
}

Как состояния влияют на доступность сайта
Не все пользователи используют мышь, поэтому важно, чтобы по сайту можно было перемещаться при помощи клавиатуры или других альтернативных устройств.
Рекомендуется обязательно указывать состояния :hover
, :focus
и :active
для всех интерактивных элементов, с которыми взаимодействует пользователь. Это позволяет создать доступный и понятный интерфейс.
В формах обратной связи состояние :focus
используется для выделения активного поля при навигации с помощью клавиатуры. Это помогает пользователям с ограниченными возможностями корректно заполнять форму.

Когда состояния элементов различаются, пользователю легко понять, где ссылка, а где сейчас находится фокус. Ссылкам лучше указывать разные цвета для :hover
и :active
, чтобы пользователь мог отличить, какой элемент он выбрал.
Поэтому прописывать все состояния вместе не всегда хорошая идея:
.a:hover,
.a:focus,
.a:active {
}
Кроме того, в разных браузерах и операционных системах отображение состояний может отличаться, поэтому такой код не будет работать идеально. Лучше полностью разделять состояния и каждому давать свою стилизацию.
.a:hover {}
.a:focus {}
.a:active {}
Также состояния элементов могут использоваться для создания эффектов анимации и визуальных изменений на сайте. Например, при наведении на изображение можно увеличить его размер или добавить эффект тени.
Узнать больше о доступности сайтов и способах её улучшения вы можете на нашем специализированном курсе.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023




Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023

Плавные трансформации на чистом CSS. Свойство transition
Так плавно, что вы даже не заметите.
- 15 мая 2023

Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow
Чтобы текст и картинки не выпадали из блока.
- 14 мая 2023

Как отобразить элемент на странице. Свойство display
Блок или строчный элемент, а может что-то другое, выбор за вами.
- 13 мая 2023