:hover

Псевдокласс :hover CSS псевдокласса срабатывает при взаимодействии пользователя с элементом с помощью указательного устройства, но не обязательно активирует его. Обычно он срабатывает, когда пользователь наводит курсор (указатель мыши) на элемент.

Попробуйте

Стили, определённые псевдоклассом :hover , будут перезаписаны любым последующим псевдоклассом, относящимся к ссылке (:link, :visited или :active), имеющим не меньшую специфичность. Чтобы правильно стилизовать ссылки, поместите правило :hover после правил :link и :visited , но перед правилом :active, согласно порядку LVHA: :link — :visited — :hover — :active.

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

Синтаксис

:hover {
  /* ... */
}

Примеры

Базовый пример

HTML

<a href="#">Try hovering over this link.</a>

CSS

a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

Результат

Спецификации

Спецификация
Стандарт HTML # selector-hover
Уровень 4 селекторов # the-hover-pseudo

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android
`:hover`	1	12	1	4	2	18	4	10.1	1 Начиная с Safari для iOS 7.1.2, касание кликабельного элемента приводит к тому, что элемент переходит в состояние `:hover`. Элемент останется в состоянии `:hover` до тех пор, пока другой элемент не перейдёт в состояние `:hover`.	1.0	4.4
`a_elements`	1	12	1	4	2	18	4	10.1	1	1.0	37
`all_elements`	1	12 В Edge, при наведении курсора на элемент и последующем прокручивании вверх или вниз без перемещения указателя, элемент останется в состоянии `:hover` до тех пор, пока указатель не будет перемещён. См. ошибку 5381673.	1	7	2	18	4	10.1	1	1.0	37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover