Псевдокласс CSS :hover
Псевдокласс :hover выбирает и стилизует элемент, на который наведён курсор. Он срабатывает, когда пользователь наводит указатель мыши на элемент. Для наведения не требуется нажимать кнопку указательного устройства.
Псевдокласс :active может сосуществовать с :hover. Когда оба применяются, :active имеет приоритет из-за порядка каскада, а не просто полностью переопределяет :hover.
INFO
Многие сенсорные устройства не поддерживают :hover, поскольку у них нет постоянного состояния наведения; прикосновение к элементу обычно активирует :active или :focus.
Для лучшей доступности рекомендуется применять те же стили к :focus вместе с :hover. Чтобы стили применялись только на устройствах, поддерживающих наведение, оберните правила в @media (hover: hover) { ... }.
Версия
Синтаксис
Синтаксис CSS :hover
:hover {
css declarations;
}Пример использования псевдокласса :hover:
Пример псевдокласса CSS :hover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Наведите курсор на ссылки, чтобы увидеть, как меняется цвет.
Пример использования псевдокласса :hover с тегом <a>:
Пример кода CSS :hover для ссылки
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Пример использования псевдокласса :hover с тегом <div>:
Пример кода CSS :hover для div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #444;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Практика
В чём назначение селектора :hover в CSS?