Как сделать эффект при наведении
Короткий ответ
Псевдокласс :hover срабатывает, пока курсор над элементом:
<style>
.btn { padding: 8px 18px; border: none; border-radius: 8px; background: royalblue; color: white; }
.btn:hover { background: navy; }
</style>
<button class="btn">Hover over me</button>Плавно
Без transition цвет меняется скачком. Добавьте его к обычному состоянию, а не к :hover, — тогда плавным будет и появление, и исчезновение эффекта:
<style>
.link { color: teal; text-decoration-color: transparent; transition: text-decoration-color 0.3s, color 0.3s; }
.link:hover { color: darkslategray; text-decoration-color: currentColor; }
</style>
<a class="link" href="https://example.com">Read more</a>Наведение на родителя
Эффект может менять дочерние элементы — например, показывать кнопку при наведении на карточку:
<style>
.card { padding: 12px; background: whitesmoke; }
.card button { opacity: 0; transition: opacity 0.2s; }
.card:hover button, .card:focus-within button { opacity: 1; }
</style>
<div class="card">Photo of the day <button>Save</button></div>Частая ошибка
На телефоне наведения нет: эффект срабатывает от касания и «залипает». Не прячьте важное за :hover — как в последнем примере, добавьте :focus-within или показывайте кнопку всегда. А для клавиатуры дублируйте эффект через :focus-visible.
Функции из этого ответа
- :hover — Срабатывает, пока над элементом находится указатель мыши.
- :focus-visible — Срабатывает у элемента в фокусе, когда браузер считает, что фокус нужно показать, — обычно после перехода с клавиатуры.
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- cursor — Вид указателя мыши над элементом.