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

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

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

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

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

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

Результат данного примера показан на рис. 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; }