Ховер у інтерфейсах: що це, види ефектів та реалізація

Що таке ховер у веб-дизайні

Ховер (від англ. hover — парити, зависати) — візуальна реакція елемента інтерфейсу при наведенні курсора миші. Термін використовується для позначення як самого CSS-псевдокласу :hover, так і стану елемента при наведенні.

Концепція ховеру з'явилася в ранніх графічних інтерфейсах Xerox Alto (1973) і була стандартизована в вебі з появою CSS2 у 1998 році. З тих пір ховер став невід’ємною частиною користувацького досвіду на десктопі.

За даними CSS Usage Statistics (2025), 94% сайтів у топ-1000 використовують псевдоклас :hover хоча б для одного елемента. Найчастіше ховер застосовується для кнопок (89%), посилань (85%) та карток (62%).

Відмінність ховеру від інших станів

Ховер ≠ active. :hover активується при наведенні, :active — в момент натискання. :focus активується при фокусі через клавіатуру. Кожен стан вирішує своє завдання. Ховер — це попередній перегляд, active — підтвердження дії.

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

Псевдоклас :hover у CSS застосовує стилі до елемента, коли користувач наводить на нього курсор миші. Він працює з будь-яким HTML-елементом, але найчастіше використовується з інтерактивними елементами.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

Специфічність селектора :hover така сама, як у класу (0,1,0). Якщо потрібно перевизначити ховер для певного елемента, використовуйте селектор з вищою специфічністю. Порядок оголошення важливий: якщо оголосити :hover після :focus, ховер може не працювати при фокусі.

Комбіновані псевдокласи

:hover можна комбінувати з іншими псевдокласами для створення складної логіки. Наприклад, .card:hover .card__title змінює стиль заголовка всередині картки при наведенні на всю картку. Це дозволяє створювати ефекти з вкладеною анімацією.

Види hover-ефектів

Hover-ефекти поділяються на кілька категорій за типом властивості, що змінюється. Кожен тип підходить для різних сценаріїв і створює певне відчуття у користувача.

Найефективніший тип — комбінація кольорового та тіньового ефектів. Material Design рекомендує використовувати elevation change (зміну висоти тіні) як основний тип ховер-зворотного зв’язку.

За даними Google Material Design (2024), ховер-ефект повинен бути помітним, але не відволікати. Рекомендована тривалість анімації — 200–300 мілісекунд. Надто швидкі ефекти (менше 100 мс) можуть бути не помічені, надто повільні (понад 500 мс) дратують користувача.

CSS-переходи для плавних ефектів

CSS-властивість transition робить ховер-ефекти плавними, анімуючи зміну властивостей в часі. Без transition ховер спрацьовує миттєво, що виглядає ривко та неприємно для ока.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

Тривалість transition залежить від контексту. Для дрібних елементів (іконки, посилання) — 150–200 мс. Для великих елементів (картки, модальні вікна) — 250–350 мс. Функція easing ease-out плавно уповільнює анімацію наприкінці, створюючи природне відчуття.

Рекомендована практика — вказувати transition для кожної анімованої властивості окремо. Властивість all зручна на етапі розробки, але в продакшні краще визначати конкретні властивості для анімації, щоб уникнути несподіваних ефектів.

Ховер на touch-пристроях

На сенсорних пристроях концепція ховеру відсутня: немає курсора, який можна навести на елемент. Тап по елементу одразу активує click, минуючи ховер-стан. Це створює проблеми, якщо інтерфейс покладається виключно на ховер.

За даними StatCounter (2026), 62% світового веб-трафіку припадає на мобільні пристрої. Ігнорувати відсутність ховеру на touch-екранах — значить втратити контроль над UX для більшості користувачів.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

Медіа-запит hover: none дозволяє визначити, що пристрій не підтримує наведення. На таких пристроях ховер-ефекти вимикаються, і взаємодія будується на :active та :focus-станах. Альтернативне рішення — показувати ховер-контент при тапі (перший тап показує ховер, другий — виконує дію), але такий патерн погіршує UX.

Доступність hover-ефектів

Доступність ховеру — критичний аспект, який часто упускають. Користувачі, які керують інтерфейсом з клавіатури, не можуть активувати :hover. Функції, доступні тільки через ховер, стають для них недоступними.

Правило WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): контент, що з'являється при ховері, повинен бути доступний і при фокусі. Якщо ховер показує додаткову інформацію (тултип, випадне меню), ця ж інформація повинна бути доступна при :focus.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

Медіа-запит prefers-reduced-motion — поважайте системні налаштування користувача. Якщо користувач відключив анімацію в системі, ховер-ефекти повинні застосовуватися миттєво, без transition. Це допомагає людям з вестибулярними розладами.

Додаткові рекомендації: не використовуйте ховер для критичних функцій, не використовуйте лише колір для передачі інформації при ховері (додавайте іконку або текст) та забезпечте достатній контраст для ховер-станів.