Использование :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; }
См. также
- :focus на мобильных устройствах
- <a>
- text-decoration-skip-ink
- Виды ссылок
- Всплывающая подсказка
- Наследование в CSS
- Нормальное позиционирование
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Сочетание с псевдоклассами
- Ссылки
- Ссылки
- Ссылки в HTML
- Якоря