Hover w interfejsach: co to, rodzaje efektów i implementacja

Co to jest hover w projektowaniu stron

Hover (z ang. hover — unosić się) — wizualna reakcja elementu interfejsu na najechanie kursorem myszy. Termin ten używany jest zarówno do określenia samej pseudoklasy CSS :hover, jak i stanu elementu po najechaniu.

Koncepcja hover pojawiła się we wczesnych interfejsach graficznych Xerox Alto (1973) i została ustandaryzowana w sieci wraz z pojawieniem się CSS2 w 1998 roku. Od tego czasu hover stał się nieodłączną częścią doświadczenia użytkownika na komputerach stacjonarnych.

Według CSS Usage Statistics (2025), 94% stron w top 1000 używa pseudoklasy :hover przynajmniej dla jednego elementu. Najczęściej hover stosowany jest dla przycisków (89%), linków (85%) i kart (62%).

Różnica między hover a innymi stanami

Hover ≠ active. :hover aktywuje się po najechaniu, :active — w momencie kliknięcia. :focus aktywuje się przy fokusie z klawiatury. Każdy stan rozwiązuje swoje zadanie. Hover to podgląd, active — potwierdzenie działania.

Pseudoklasa :hover w CSS

Pseudoklasa :hover w CSS stosuje style do elementu, gdy użytkownik najedzie na niego kursorem myszy. Działa z każdym elementem HTML, ale najczęściej używana jest z elementami interaktywnymi.

/* 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);
}

Specyficzność selektora :hover — taka sama jak klasy (0,1,0). Jeśli potrzebujesz nadpisać hover dla konkretnego elementu, użyj selektora z wyższą specyficznością. Kolejność deklaracji jest ważna: jeśli zadeklarujesz :hover po :focus, hover może nie działać przy fokusie.

Połączone pseudoklasy

:hover można łączyć z innymi pseudoklasami w celu tworzenia złożonej logiki. Na przykład .card:hover .card__title zmienia styl nagłówka wewnątrz karty po najechaniu na całą kartę. Pozwala to tworzyć efekty z zagnieżdżoną animacją.

Rodzaje efektów hover

Efekty hover dzielą się na kilka kategorii w zależności od rodzaju zmienianej właściwości. Każdy typ pasuje do różnych scenariuszy i wywołuje określone odczucie u użytkownika.

Najbardziej efektywny typ — kombinacja efektu kolorystycznego i cieniowego. Material Design zaleca używanie zmiany wysokości cienia jako głównego typu informacji zwrotnej hover.

Według Google Material Design (2024), efekt hover powinien być zauważalny, ale nie rozpraszający. Zalecany czas trwania animacji to 200–300 milisekund. Zbyt szybkie efekty (poniżej 100 ms) mogą być niezauważone, zbyt wolne (powyżej 500 ms) irytują użytkownika.

Przejścia CSS dla płynnych efektów

Właściwość CSS transition sprawia, że efekty hover są płynne, animując zmianę właściwości w czasie. Bez transition hover działa natychmiastowo, co wygląda szarpnięcie i jest nieprzyjemne dla oka.

/* 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);
}

Czas trwania transition zależy od kontekstu. Dla małych elementów (ikony, linki) — 150–200 ms. Dla dużych elementów (karty, okna modalne) — 250–350 ms. Funkcja easing ease-out płynnie zwalnia animację pod koniec, tworząc naturalne odczucie.

Zalecana praktyka — określaj transition dla każdej animowanej właściwości osobno. Właściwość all jest wygodna na etapie rozwoju, ale w produkcji lepiej definiować konkretne właściwości do animacji, aby uniknąć nieoczekiwanych efektów.

Hover na urządzeniach dotykowych

Na urządzeniach dotykowych koncepcja hover nie istnieje: nie ma kursora, który można by najechać na element. Dotknięcie elementu natychmiast aktywuje click, pomijając stan hover. Stwarza to problemy, jeśli interfejs polega wyłącznie na hover.

Według StatCounter (2026), 62% światowego ruchu internetowego pochodzi z urządzeń mobilnych. Ignorowanie braku hover na ekranach dotykowych oznacza utratę kontroli nad UX dla większości użytkowników.

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

Zapytanie medialne hover: none pozwala określić, że urządzenie nie obsługuje najeżdżania. Na takich urządzeniach efekty hover są wyłączane, a interakcja opiera się na stanach :active i :focus. Alternatywne rozwiązanie — pokazywanie treści hover przy dotknięciu (pierwsze dotknięcie pokazuje hover, drugie wykonuje akcję), ale taki wzorzec pogarsza UX.

Dostępność efektów hover

Dostępność hover — krytyczny aspekt, który często jest pomijany. Użytkownicy, którzy sterują interfejsem za pomocą klawiatury, nie mogą aktywować :hover. Funkcje dostępne tylko przez hover stają się dla nich niedostępne.

Zasada WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): treść pojawiająca się po najechaniu musi być dostępna również przy fokusie. Jeśli hover pokazuje dodatkowe informacje (tooltip, menu rozwijane), te same informacje muszą być dostępne przy :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;
    }
}

Zapytanie medialne prefers-reduced-motion — szanuj ustawienia systemowe użytkowników. Jeśli użytkownik wyłączył animację w systemie, efekty hover powinny być stosowane natychmiastowo, bez transition. Pomaga to osobom z zaburzeniami błędnika.

Dodatkowe zalecenia: nie używaj hover dla krytycznych funkcji, nie używaj tylko koloru do przekazywania informacji przy hover (dodaj ikonę lub tekst) i zapewnij wystarczający kontrast dla stanów hover.