W3docs
ru
Войти

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

Узнайте, как работает псевдокласс :hover в CSS, как сочетать его с переходами и правильно обрабатывать сенсорные устройства и доступность.

Псевдокласс :hover соответствует элементу, пока указатель пользователя находится над ним. Он активируется, как только указатель перемещается на элемент, и деактивируется в момент, когда указатель уходит — нажатие не требуется.

На этой странице рассматривается:

  • Базовый синтаксис и способы нацеливания на ссылки, кнопки и любые элементы
  • Сочетание :hover с transition для плавных анимированных эффектов
  • Наведение на родительский элемент для отображения или изменения стиля дочерних элементов (паттерн выпадающего меню)
  • Ограничение hover-стилей с помощью @media (hover: hover) для безопасной работы на сенсорных устройствах
  • Требования к доступности и использование :focus / :focus-within в паре с :hover

Синтаксис

selector:hover {
  /* declarations applied while pointer is over the element */
}

Селектор может быть любым допустимым CSS-селектором — элементом, классом, ID или цепочкой комбинаторов.

Стилизация ссылок при наведении

Наиболее распространённое применение :hover — изменение внешнего вида якорных ссылок. Для предсказуемой стилизации ссылок объявляйте правила в порядке LVHA: :link, :visited, :hover, :active. Этот порядок гарантирует, что более поздние псевдоклассы могут переопределять более ранние без неожиданностей со специфичностью.

<!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 на встроенных текстовых ссылках

Когда ссылка расположена внутри абзаца, :hover по-прежнему нацелен только на тот элемент <a> — окружающий текст не затрагивается.

<!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 на блочных элементах

: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-эффекты с transition

Обычное правило :hover мгновенно переключает стили. Добавление transition к базовому селектору (не к правилу :hover) заставляет браузер анимировать изменение в обоих направлениях — когда указатель входит и когда он уходит.

.button {
  background-color: #1c87c9;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Place transition on the base rule, not :hover */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
  background-color: #145e8a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Если поместить transition только внутри правила :hover, анимация будет воспроизводиться при входе, но мгновенно возвращаться при выходе — распространённая ошибка начинающих.

Можно переходить сразу несколько свойств, разделяя их запятыми, или использовать transition: all 0.25s ease как сокращение (хотя нацеливание на конкретные свойства лучше для производительности).

Hover на родителе для стилизации дочерних элементов

:hover может быть частью комбинаторного селектора, чтобы реагировать на состояние наведения родителя и стилизовать потомка. Это основа выпадающих навигационных меню и эффектов появления при наведении.

/* Card image starts dimmed; brightens when the card is hovered */
.card .card-image {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.card:hover .card-image {
  opacity: 1;
}

/* Reveal an overlay label on hover */
.card .card-label {
  display: none;
}

.card:hover .card-label {
  display: block;
}

Паттерн выпадающего меню

.nav-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.nav-item:hover .dropdown {
  display: block;
}
Внимание

Меню, доступные только при наведении, недоступны для пользователей клавиатуры и сенсорных устройств. Совместите :hover с :focus-within, чтобы меню открывалось и тогда, когда дочерний элемент получает фокус при навигации с клавиатуры:

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

Ограничение hover-стилей для сенсорных устройств

Многие сенсорные устройства имитируют hover при касании, из-за чего стили могут «залипнуть» до следующего касания в другом месте. Чтобы этого избежать, оберните hover-специфичные правила в медиазапрос, который проверяет, действительно ли основное устройство ввода поддерживает hover:

/* Only apply on devices with a real pointer (mouse, trackpad) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

Медиафункция hover: hover широко поддерживается в современных браузерах. На устройствах только с сенсорным управлением блок просто игнорируется, и базовые стили остаются чистыми.

Можно также сочетать её с pointer: fine, чтобы нацелиться на устройства с точным указателем (мышь/трекпад), исключив устройства с грубым управлением (сенсорные):

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #145e8a;
  }
}

Доступность: сочетание :hover с :focus

Пользователи клавиатуры перемещаются с помощью клавиши Tab, которая вызывает :focus, а не :hover. Если ваши hover-стили передают важную визуальную обратную связь (например, выделяют активный пункт навигации), применяйте те же стили к :focus, чтобы пользователи клавиатуры получали равнозначную обратную связь:

/* Always pair hover and focus for interactive elements */
a:hover,
a:focus {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
  text-decoration: underline;
}

Для составных компонентов (например, карточки с кнопкой) :focus-within позволяет стилизовать родительский элемент, когда любой дочерний элемент получает фокус:

.card:hover,
.card:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
Информация

Многие сенсорные устройства не вызывают постоянное состояние :hover; касание элемента обычно вызывает :active или :focus. Всегда тестируйте интерактивные паттерны наведения на реальном сенсорном устройстве или с эмуляцией касания.

Hover-эффекты для других свойств

:hover не ограничивается цветами. Любое анимируемое CSS-свойство может переключаться или анимироваться при наведении:

СвойствоТипичный hover-эффект
opacityПлавное появление/исчезновение наложений или дополнительного UI
transformМасштабирование, перемещение или поворот элемента
box-shadowДобавление глубины карточкам и кнопкам
colorИзменение цвета текста или иконки
cursorСигнализирование об интерактивности элемента

Рекомендации

  • Дополняйте :hover через :focus, чтобы пользователи клавиатуры получали ту же визуальную обратную связь: a:hover, a:focus { ... }.
  • Ограничивайте hover-анимации с помощью @media (hover: hover), чтобы предотвратить «залипание» стилей на сенсорных устройствах.
  • Размещайте transition в базовом правиле, а не внутри :hover, чтобы анимация работала в обоих направлениях.
  • Не скрывайте важный контент, доступный только при наведении — он невидим для пользователей сенсорных устройств и может быть пропущен программами чтения с экрана.
  • Сочетайте hover-меню с :focus-within, чтобы навигация с клавиатуры могла их открывать без мыши.
  • Соблюдайте порядок LVHA при стилизации ссылок: :link, :visited, :hover, :active.

Поддержка браузеров

:hover поддерживается во всех современных браузерах и существует с IE 7 для большинства элементов (IE 6 поддерживал его только для тегов <a>). Медиазапрос @media (hover: hover) поддерживается в Chrome 41+, Firefox 64+, Safari 9+ и Edge 79+.

Практика

Практика
Какова цель селектора :hover в CSS?
Какова цель селектора :hover в CSS?
Was this page helpful?