:hover CSS
Псевдокласс :hover
срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.
Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link
, :visited
и :active
, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover
до правил :link
и :visited
, но после :active
, как определено в LVHA-порядке: :link
— :visited
— :hover
— :active
.
Псевдокласс :hover
может применяться к любому псевдоэлементу.
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Замечания по использованию: на сенсорных экранах :hover
проблемный или не работает. В зависимости от браузера, псевдокласс :hover
может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
- Наследуется:
- Нет
- Анимируется:
- Нет
- Спецификации:
Синтаксис
/* Selects any <a> element when "hovered" */
a:hover {
color: orange;
}
Примеры
Выпадающее меню
С псевдоклассом :hover
вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:
div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}
применим к HTML структуре типа следующей:
<div class="menu-bar">
<ul>
<li>
<a href="example.html">Меню</a>
<ul>
<li>
<a href="example.html">Ссылка</a>
</li>
<li>
<a class="menu-nav" href="example.html">Подменю</a>
<ul>
<li>
<a class="menu-nav" href="example.html">Подменю</a>
<ul>
<li><a href="example.html">Ссылка</a></li>
<li><a href="example.html">Ссылка</a></li>
<li><a href="example.html">Ссылка</a></li>
<li><a href="example.html">Ссылка</a></li>
</ul>
</li>
<li><a href="example.html">Ссылка</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Смотрите наш полный пример выпадающего меню, основанный на CSS.
Галерея полноразмерных изображений и превью
Вы можете использовать псевдокласс :hover
, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.