Псевдокласс :hover

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

Селектор:hover { ... }
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hover</title> <style> a:link { color: #0000d0; /* Цвет ссылок */ padding: 2px; /* Поля вокруг текста */ } a:hover { background: #786b59; /* Цвет фона под ссылкой */ color: #ffe; /* Цвет ссылки */ } </style> </head> <body> <p><a href="page/1.html">Ссылка 1</a></p> <p><a href="page/2.html">Ссылка 2</a></p> <p><a href="page/3.html">Ссылка 3</a></p> </body> </html>

В данном примере псевдокласс :hover применяется к ссылке (элементу <a>), при этом меняется цвет ссылки и фона под ней.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hover</title> <style> ul { width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font-size: 10pt; /* Размер названий в пункте меню */ } li ul { position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */ margin-left: 165px; /* Сдвигаем подменю вправо */ margin-top: -2em; /* Сдвигаем подменю вверх */ } li a { display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: #666; /* Цвет текста */ border: 1px solid #ccc;/* Рамка вокруг пунктов меню */ background-color: #f0f0f0; /* Цвет фона */ border-bottom: none; /* Границу снизу не проводим */ } li a:hover { color: #ffe; /* Цвет текста активного пункта */ background-color: #5488af; /* Цвет фона активного пункта */ } li:hover ul { display: block; /* При выделении пункта курсором мыши отображается подменю */ } .brd { border-bottom: 1px solid #ccc; /* Линия снизу */ } </style> </head> <body> <ul class="menu"> <li><a href="#">Русская кухня</a> <ul> <li><a href="#">Бефстроганов</a></li> <li><a href="#">Гусь с яблоками</a></li> <li><a href="#">Крупеник новгородский</a></li> <li><a href="#" class="brd">Раки по-русски</a></li> </ul> </li> <li><a href="#">Украинская кухня</a> <ul> <li><a href="#">Вареники</a></li> <li><a href="#">Жаркое по-харьковски</a></li> <li><a href="#">Капустняк черниговский</a></li> <li><a href="#" class="brd">Потапцы с помидорами</a></li> </ul> </li> <li><a href="#">Кавказская кухня</a> <ul> <li><a href="#">Суп-харчо</a></li> <li><a href="#">Лилибдж</a></li> <li><a href="#">Чихиртма</a></li> <li><a href="#" class="brd">Шашлык</a></li> </ul> </li> <li><a href="#" class="brd">Кухня Средней Азии</a></li> </ul> </body> </html>

В данном примере псевдокласс :hover добавляется к элементу списка (<li>) для создания двухуровневого меню.

Примечание

В браузере Internet Explorer до версии 7 псевдокласс :hover работает только для ссылок.

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

Спецификация Статус
Selectors Level 4 Рабочий проект
Selectors Level 3 Рекомендация
CSS Level 2 (Revision 1) Рекомендация

Браузеры

4 7 12 1 4 2 1
1 1 6 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.