Каскадные таблицы стилей: псевдокласс hover¶

Псевдокласс :hover — это правило каскадных таблиц стилей (CSS), которое применяет стилевые свойства к элементу веб-страницы в момент, когда указатель мыши (курсор) находится над этим элементом. Данный псевдокласс является одним из базовых инструментов интерактивного оформления и используется для создания визуальной обратной связи с пользователем.

¶Механизм действия

Псевдокласс :hover относится к так называемым динамическим псевдоклассам, которые активируются в ответ на действия пользователя. В отличие от структурных псевдоклассов (например, :first-child), которые зависят от положения элемента в дереве документа, :hover зависит от состояния ввода.

Срабатывание происходит при соблюдении следующих условий:

• Наличие устройства с графическим указателем (мышь, трекпад, графический планшет).
• Указатель физически находится в пределах прямоугольной области, занимаемой элементом.
• Элемент не заблокирован другим элементом, перекрывающим его (например, модальным окном).

Важно отметить, что на сенсорных экранах (смартфоны, планшеты) понятие «наведение» отсутствует, поскольку нет курсора. В таких средах :hover либо не срабатывает вовсе, либо имитируется первым касанием, что может вызывать конфликты с событием click.

¶Синтаксис и спецификация

В CSS псевдокласс добавляется к селектору через двоеточие без пробела. Конструкция выглядит следующим образом:

``css селектор:hover { свойство: значение; } ``

Данный синтаксис не изменился со времен CSS1 (1996 год), когда псевдокласс был впервые стандартизирован. В спецификации CSS Selectors Level 3 (2005) поведение было уточнено для работы с элементами, не являющимися ссылками. В модуле Selectors Level 4 (действующая редакция) определение осталось прежним, но были добавлены уточнения касательно областей наведения.

¶Области применения

¶Ссылки и навигация

Исторически :hover применялся исключительно к гиперссылкам (<a>). Классический набор состояний ссылки включает:

• :link — непосещенная ссылка;
• :visited — посещенная ссылка;
• :hover — наведение курсора;
• :active — момент нажатия кнопки мыши.

¶Кнопки и элементы управления

Стандартная практика — изменение фона, цвета текста или добавление тени при наведении на кнопку. Это повышает тактильную понятность интерфейса.

¶Таблицы и списки

Подсветка строки таблицы при наведении (tr:hover) используется для облегчения чтения больших массивов данных.

¶Выпадающие меню

Классический механизм раскрытия подменю при наведении на пункт родительского меню реализуется через :hover на контейнере.

¶Карточки товаров и изображения

Эффекты масштабирования (transform: scale), изменение прозрачности или появление оверлея с текстом часто привязываются к этому псевдоклассу.

¶Типичные свойства для стилизации

Чаще всего с :hover используются следующие CSS-свойства:

• color и background-color — изменение цветовой схемы;
• border и outline — выделение границ;
• box-shadow — создание объемной тени;
• transform — сдвиг, поворот или масштабирование;
• opacity и visibility — проявление скрытых элементов;
• transition — плавность анимации перехода между состояниями.

¶Ограничения и особенности

¶Каскад и приоритет

Правило :hover имеет более высокий приоритет, чем обычное правило для селектора, но его переопределяют псевдоклассы :active и :visited при равной специфичности. Порядок объявления «LVHA» (link, visited, hover, active) рекомендуется для ссылок.

¶Накопление состояния

Если элемент вложен в другой элемент, наведение на дочерний элемент автоматически активирует :hover и для родителя. Это свойство используется для создания сложных меню.

¶Скрытые элементы

Нельзя применить :hover к элементу со свойством display: none. Для плавного появления часто используют opacity: 0 в сочетании с pointer-events: none.

¶Отсутствие на тач-устройствах

По данным статистики использования веб-технологий, значительная доля трафика приходится на устройства с сенсорным вводом. Разработчикам следует предусматривать альтернативные состояния (например, через псевдокласс :focus) для обеспечения доступности.

¶Доступность и юзабилити

Применение :hover требует осторожности с точки зрения доступности (a11y). Пользователи, которые не могут использовать мышь (работающие с клавиатуры или скринридеров), не получают визуального сигнала. Рекомендуется дублировать важные интерактивные состояния через :focus-visible.

Кроме того, чрезмерное использование анимаций при наведении может вызывать дискомфорт у людей с вестибулярными нарушениями. В операционной системе существует настройка «Уменьшить движение», которую можно учитывать через медиазапрос @media (prefers-reduced-motion: reduce).

¶Критика и альтернативы

В веб-дизайне существует тенденция отказа от использования :hover как единственного индикатора интерактивности, поскольку мобильные пользователи не видят таких подсказок. Вместо этого применяются:

• Постоянно видимые элементы управления;
• Использование :focus и :focus-within для клавиатурной навигации;
• JavaScript-обработчики событий mouseenter и mouseleave, которые не всплывают по дереву DOM.

Тем не менее, :hover остается стандартом де-факто для десктопных веб-интерфейсов и поддерживается всеми современными браузерами без префиксов.

¶Будущее стандарта

В спецификации CSS Selectors Level 4 рассматривается расширение возможностей, включая псевдокласс :hover с аргументами, но на практике реализация ограничена. Основные изменения касаются не самого псевдокласса, а связанных медиа-функций, таких как (hover: hover) и (pointer: fine), позволяющих адаптировать стили под конкретный тип устройства ввода.