:hover — CSS: каскадные таблицы стилей
Псевдокласс CSS :hover соответствует, когда пользователь взаимодействует с элементом с помощью указывающего устройства, но не обязательно активирует его. Обычно он срабатывает, когда пользователь наводит курсор на элемент (указатель мыши).
/* Выбирает любой элемент при "зависании" */ а: наведите { оранжевый цвет; }
Стили, определенные псевдоклассом :active , будут переопределены любым последующим псевдоклассом, связанным со ссылкой ( :link , :visited или :active ), которые имеют как минимум равную специфичность. Чтобы правильно оформить ссылки, поместите правило :hover после правил :link и :visited , но перед правилом :active , как определено LVHA-порядком : :link — 9 0004 : посетил — :hover — :active .
Примечание : Псевдокласс :hover проблематичен на сенсорных экранах. В зависимости от браузера :hover псевдокласс может никогда не совпадать, совпадать только на мгновение после касания элемента или продолжать совпадать даже после того, как пользователь перестал касаться и до тех пор, пока пользователь не коснется другого элемента. Веб-разработчики должны убедиться, что контент доступен на устройствах с ограниченными или отсутствующими возможностями зависания.
Синтаксис
: наведите курсор на
Примеры
Базовый пример
HTML
Попробуйте навести курсор на эту ссылку.
УСБ
а {
фоновый цвет: голубой;
переход: фоновый цвет .5s;
}
а: наведите {
цвет фона: золото;
} Результат
Галерея изображений
Вы можете использовать псевдокласс :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только при наведении указателя мыши на миниатюру.
См. эту демонстрацию для возможной подсказки.
Примечание: Аналогичный эффект, но основанный на псевдоклассе :checked (применительно к скрытым переключателям), см. в этой демонстрации, взятой со справочной страницы :checked.
Технические характеристики
| Спецификация | Комментарий | Обратная связь |
|---|---|---|
| HTML Living Standard Определение ‘:hover’ в этой спецификации. | WHATWG HTML GitHub выдает | |
| Селекторы уровня 4 Определение ‘:hover’ в этой спецификации. | Позволяет применять :hover к любому псевдоэлементу. | Рабочая группа CSS составляет черновики ошибок GitHub |
Селекторы уровня 3  | ||
| CSS уровня 2 (редакция 1) Определение ‘:hover’ в этой спецификации. | Исходное определение. |
Совместимость с браузером
Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.
| Рабочий стол | Мобильный | ||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer 9 0082 | Opera | Safari | Веб-просмотр Android | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Samsung Internet | ||||||||||||||||||||||||||||||||||||
:hover | Chrome Полная поддержка 1 | Край Полная поддержка 12 | Firefox Полная поддержка 1 | ИЭ Полная поддержка | Опера Полная поддержка 4 | Сафари Полная поддержка 2 | Веб-просмотр Android Полная поддержка 37 | Хром Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка 10. | Сафари iOS Полная поддержка 1 Примечания
| Samsung Интернет Android Полная поддержка 1.0 | |||||||||||||||||||||||||||||||||||
Элемент опорныйНестандартный | Хром Полная поддержка 1 | Край Полная поддержка 12 | Firefox Полная поддержка 1 | ИЭ Полная поддержка 4 | Опера Полная поддержка 4 | Сафари Полная поддержка 2 | Веб-просмотр Android | Хром Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка 10. 1 | Сафари iOS Полная поддержка 1 | Самсунг Интернет Android Полная поддержка 1.0 | |||||||||||||||||||||||||||||||||||
| Все элементы опорные Нестандартные | Хром Полная поддержка 1 | Край Полная поддержка 12 Примечания
| Firefox | ИЭ Полная поддержка 7 Примечания
| |||||||||||||||||||||||||||||||||||||||||||
См. ошибку 926665.
1
0
Этот стиль может быть переопределен любыми другими псевдоклассами, связанными со ссылками, то есть 
Это распространенная техника, используемая, например, для создания выпадающих меню на чистом CSS (то есть только CSS, без использования JavaScript). Суть этой методики заключается в создании правила наподобие следующего:
html">Ссылка
7b_.7d)" title="Фигурные скобки">{
0 (1.7 или более ранняя версия)
См. ошибку IE 926665.
0004: наведите курсор на состояние.
