Справочник HTML & CSS

:hover

Срабатывает, пока над элементом находится указатель мыши.

Синтаксис

selector:hover { … }

Примеры

Кнопка меняет цвет под указателем:

<style>
  .btn { padding: 8px 16px; background: royalblue; color: white; border: 0; }
  .btn:hover { background: navy; }
</style>
 
<button class="btn">Hover over me</button>

Наведение на родителя показывает дочерний элемент:

<style>
  .card { padding: 12px; border: 1px solid lightgray; }
  .card:hover .hint { visibility: visible; }
  .hint { visibility: hidden; color: gray; }
</style>
 
<div class="card">Card <span class="hint">— more details</span></div>

Примечания

На сенсорных экранах настоящего наведения нет: касание может включить :hover и оставить его. Не прячьте важное за наведением и дублируйте его через :focus-visible для тех, кто пользуется клавиатурой. Чтобы эффекты наведения были только на устройствах с мышью, оберните их в @media (hover: hover).

См. также

:focus — Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
:active — Срабатывает, пока элемент нажимают, — между нажатием и отпусканием кнопки мыши.
transition — Плавно анимирует изменение свойства от старого значения к новому.

Вопросы и ответы по теме

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.

Спасибо, что читаете!