CSS псевдо-класс :hover
Поддержка браузерами
12.0+ | 7.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
Псевдо-класс :hover
используется для выбора любого тега, на который в данный момент указывает курсор мыши. Синтаксис псевдо-класса достаточно прост: сначала указывается селектор, определяющий тег, затем, сразу после него, указывается псевдо-класс :hover
.
В качестве примера работы динамического (применение стилей в ответ на какие-либо действия) псевдо-класса можно рассмотреть пример подсветки элементов:
body *:hover { background-color: yellow; }
Применив это правило, у любого тега, являющегося потомком тега <body>
, будет изменяться задний фон на желтый, при наведении на тег курсора мыши.
Примечание: псевдо-класс :hover
должен быть расположен после псевдо-классов :link
и :visited
(если они используются).
Пример:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> body *:hover { background-color: aqua; } </style> </head> <body> <a href="#">Ссылка</a> <h3>Заголовок</h3> <p>Абзац</p> </body> </html>