Использование :hover

На примере ссылок использование :hover выглядит следующим образом.

a { color: green; }
a:hover { color: red; }

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

:hover прекрасно сочетается не только с простыми селекторами элементов, но и с классами, а также работает в комбинациях селекторов, что позволяет на одной веб-странице делать группы ссылок разных видов. В примере 1 ссылки в <header> добавлены без традиционного подчёркивания через свойство text-decoration со значением none. При наведении на эти ссылки добавляется подчёркивание с помощью значения underline. В <footer> ссылки при наведении просто меняют свой цвет.

Пример 1. Использование :hover для ссылок

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Сальса</title> <style> header { background: #e2edc1; } footer { background: #f4783b; } ul { margin: 0; padding: 10px; } li { display: inline; margin-right: 10px; } header a { color: #333391; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание */ } header a:hover { text-decoration: underline; /* Добавляем подчёркивание при наведении */ } footer a { color: #fff; } footer a:hover { color: #333; } </style> </head> <body> <header> <ul> <li><a href="#">Uno</a></li> <li><a href="#">Dos</a></li> <li><a href="#">Tres</a></li> </ul> </header> <main> <p>Сальса — современный социальный танец. Как многие латиноамериканские танцы, сальса экспрессивна, разнообразна и богата импровизацией.</p> </main> <footer> <ul> <li><a href="#">Cinco</a></li> <li><a href="#">Seis</a></li> <li><a href="#">Siete</a></li> </ul> </footer> </body> </html>

Результат данного примера показан на рис. 1.

Ссылки разных цветов

Рис. 1. Ссылки разных цветов

Надо учитывать, что в некоторых ситуациях :hover может не давать видимого результата, когда он неявно переопределяется. В приведённом стиле :hover не меняет цвет у посещённых ссылок, поскольку псевдокласс :visited располагается в коде ниже :hover.

a { color: green; }
a:hover { color: red; }
a:visited { color: purple; }

Обращайте внимание, что положение в коде влияет на конечный результат. Достаточно поставить :hover ниже :visited и цвет посещённых ссылок при наведении будет меняться на красный.

a { color: green; }
a:visited { color: purple; }
a:hover { color: red; }

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты