Исполняемые доки CSS: Hover в CSS

Q: Как сделать эффект при наведении в CSS?

Напишите правило с :hover после селектора: .btn:hover { background: #1d4ed8; }. Объявления применяются, пока указатель над элементом. Добавьте transition: background 0.2s; в обычное правило, чтобы изменение было анимированным.

Q: Чем :hover отличается от :active?

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

Q: В каком порядке писать псевдоклассы ссылок?

:link, :visited, :hover, :active (запомните LVHA, или «LoVe HAte»). Специфичность у них одинаковая, поэтому побеждает более позднее правило; при любом другом порядке стиль посещенной или наведенной ссылки может скрыть стиль hover или active.

Q: Как изменить цвет ссылки в CSS?

Оформите элемент a: a { color: #2563eb; }, а затем a:visited { color: #7c3aed; } и a:hover { color: #1d4ed8; } для других состояний. color на a действует и на непосещенные, и на посещенные ссылки.

Как работает :hover

:hover это псевдокласс, который выбирает элемент, пока над ним находится указатель мыши. Добавьте его к любому селектору и напишите стили для состояния наведения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Меняются только объявления из правила :hover, все остальное берется из .btn. Когда указатель уходит, элемент возвращается к обычным стилям.

Плавные эффекты наведения с transition

Изменение при наведении происходит мгновенно, если не добавить transition в обычное правило (а не в правило :hover); тогда анимация идет и при наведении, и при уходе:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform и opacity дешевле всего анимировать: они не сдвигают соседние элементы. Анимация width, height или margin заставляет страницу пересчитывать раскладку на каждом кадре. Длительность, задержки и кривые плавности описаны на странице про transition в CSS.

Цвета ссылок: :link, :visited, :hover, :active

У ссылок четыре классических состояния плюс фокус с клавиатуры, и порядок правил важен:

Псевдокласс	Действует, когда
`:link`	Ссылку еще не посещали
`:visited`	URL есть в истории браузера
`:hover`	Над ссылкой указатель
`:active`	Ссылку нажимают
`:focus-visible`	На ссылке фокус с клавиатуры

Специфичность у всех одинаковая, поэтому при совпадении двух побеждает более позднее правило. Посещенная ссылка под указателем подходит и под :visited, и под :hover; если :visited идет последним, цвет наведения никогда не появится. Надежный порядок: Link, Visited, Hover, Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Браузеры ограничивают то, что может менять :visited, чтобы страницы не могли прочитать вашу историю. Действуют только свойства, связанные с цветом (color, background-color, border-color, outline-color и еще несколько), а скрипты всегда видят значение непосещенной ссылки.

:active: состояние нажатия

:active выбирает элемент, пока его нажимают. Небольшое смещение делает кнопку ощутимо «физической»:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Наведение на родителя меняет дочерний элемент

Состояние hover принадлежит элементу под указателем и всем его предкам. Поэтому .card:hover .title оформляет заголовок, когда наведена любая часть карточки, и так же можно показывать скрытые элементы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

Строка с :focus-within важна: без нее пользователь клавиатуры, дошедший табом до кнопки Delete, нажал бы невидимую кнопку. Каждому появлению по наведению нужна пара с правилом для фокуса.

Hover на сенсорных экранах

У телефонов и планшетов нет указателя, который задерживается над элементом. Большинство мобильных браузеров применяют :hover при первом касании и держат его, пока вы не коснетесь другого места, поэтому стиль наведения может выглядеть «залипшим». Два правила держат это под контролем:

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

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Частые ошибки

Пробел перед двоеточием. .btn :hover означает «наведенный элемент внутри .btn». Пишите .btn:hover.
transition только в правиле :hover. Тогда анимация есть при наведении, а при уходе стиль возвращается скачком. Ставьте его в обычное правило.
Неправильный порядок для ссылок. Держите :link, :visited, :hover, :active именно в этом порядке.
Hover без стиля фокуса. Пользователи клавиатуры никогда не вызывают :hover; задайте интерактивным элементам и стиль :focus-visible.
Hover на элементе, перекрытом другим. Невидимый слой сверху (часто абсолютный псевдоэлемент) может перехватывать указатель. pointer-events: none на этом слое решает проблему.

Часто задаваемые вопросы

Как сделать эффект при наведении в CSS?

Напишите правило с :hover после селектора: .btn:hover { background: #1d4ed8; }. Объявления применяются, пока указатель над элементом. Добавьте transition: background 0.2s; в обычное правило, чтобы изменение было анимированным.

Чем :hover отличается от :active?

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

В каком порядке писать псевдоклассы ссылок?

:link, :visited, :hover, :active (запомните LVHA, или «LoVe HAte»). Специфичность у них одинаковая, поэтому побеждает более позднее правило; при любом другом порядке стиль посещенной или наведенной ссылки может скрыть стиль hover или active.

Как изменить цвет ссылки в CSS?

Оформите элемент a: a { color: #2563eb; }, а затем a:visited { color: #7c3aed; } и a:hover { color: #1d4ed8; } для других состояний. color на a действует и на непосещенные, и на посещенные ссылки.

Работает ли hover на телефоне?

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

Связанные концепции

Hover в CSS: :hover, :active и цвета ссылок