Hover a felületeken: mi ez, effektustípusok és megvalósítás

Mi az a hover a webdizájnban

A hover (az angol hover — lebegés szóból) — egy felületi elem vizuális reakciója az egérkurzor fölé helyezésére. A kifejezés mind a :hover CSS pszeudoosztályra, mind az elem fölé helyezéskori állapotára utal.

A hover koncepciója a Xerox Alto (1973) korai grafikus felületeiben jelent meg, és az 1998-as CSS2 megjelenésével szabványosult a weben. Azóta a hover a felhasználói élmény szerves részévé vált asztali számítógépeken.

A CSS Usage Statistics (2025) szerint a top 1000 webhely 94%-a használja a :hover pszeudoosztályt legalább egy elemhez. A hover-t leggyakrabban gomboknál (89%), linkeknél (85%) és kártyáknál (62%) alkalmazzák.

A hover eltérése más állapotoktól

Hover ≠ active. A :hover fölé helyezéskor, az :active kattintáskor aktiválódik. A :focus billentyűzetes fókusz esetén aktiválódik. Minden állapot a saját feladatát oldja meg. A hover előnézet, az active a művelet megerősítése.

:hover pszeudoosztály a CSS-ben

A :hover pszeudoosztály a CSS-ben stílusokat alkalmaz egy elemre, amikor a felhasználó az egérkurzort fölé helyezi. Bármely HTML-elemmel működik, de leggyakrabban interaktív elemekkel használják.

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

A :hover szelektor specificitása — megegyezik az osztályéval (0,1,0). Ha egy adott elemhez felül kell írni a hover-t, használjon magasabb specificitású szelektort. A deklaráció sorrendje fontos: ha a :hover-t a :focus után deklarálja, a hover nem biztos, hogy működik fókusz esetén.

Kombinált pszeudoosztályok

A :hover más pszeudoosztályokkal kombinálható összetett logika létrehozásához. Például a .card:hover .card__title megváltoztatja a kártyán belüli cím stílusát, amikor az egész kártya fölé viszik a kurzort. Ez beágyazott animációjú effektusok létrehozását teszi lehetővé.

Hover-effektusok típusai

A hover-effektusok a módosított tulajdonság típusa szerint több kategóriába sorolhatók. Minden típus más-más forgatókönyvhöz illik, és bizonyos érzést kelt a felhasználóban.

A leghatékonyabb típus — a szín- és árnyékeffektus kombinációja. A Material Design az árnyékmagasság változtatását ajánlja a hover-visszajelzés elsődleges típusaként.

A Google Material Design (2024) szerint a hover-effektusnak észrevehetőnek, de nem zavarónak kell lennie. Az ajánlott animációs időtartam 200–300 ezredmásodperc. A túl gyors effektusok (100 ms alatt) észrevétlenek maradhatnak, a túl lassúak (500 ms felett) irritálják a felhasználót.

CSS-átmenetek sima effektusokhoz

A CSS transition tulajdonság simává teszi a hover-effektusokat azáltal, hogy a tulajdonságok változását időben animálja. Transition nélkül a hover azonnal működik, ami rángatózónak tűnik, és kellemetlen a szemnek.

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

A transition időtartama a kontextustól függ. Kis elemekhez (ikonok, linkek) — 150–200 ms. Nagy elemekhez (kártyák, modális ablakok) — 250–350 ms. Az easing függvény ease-out fokozatosan lassítja az animációt a végén, természetes érzést keltve.

Ajánlott gyakorlat — minden animált tulajdonsághoz külön adja meg a transition-t. Az all tulajdonság kényelmes a fejlesztési fázisban, de élesben jobb konkrét animációs tulajdonságokat meghatározni a váratlan effektusok elkerülése érdekében.

Hover touch-eszközökön

Az érintőképernyős eszközökön a hover koncepciója nem létezik: nincs kurzor, amelyet az elem fölé lehetne helyezni. Az elem megérintése azonnal click-t aktivál, kihagyva a hover állapotot. Ez problémákat okoz, ha a felület kizárólag a hover-re támaszkodik.

A StatCounter (2026) szerint a globális webes forgalom 62%-a mobileszközökről származik. Figyelmen kívül hagyni a hover hiányát az érintőképernyőkön annyit tesz, mint elveszíteni az UX feletti kontrollt a legtöbb felhasználó számára.

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

A hover: none média lekérdezés lehetővé teszi annak meghatározását, hogy az eszköz nem támogatja a rámutatást. Az ilyen eszközökön a hover-effektusok kikapcsolásra kerülnek, és az interakció az :active és :focus állapotokon alapul. Alternatív megoldás — a hover-tartalom megjelenítése érintésre (az első érintés megjeleníti a hover-t, a második végrehajtja a műveletet), de ez a minta rontja az UX-t.

Hover-effektusok akadálymentesítése

A hover akadálymentesítése — kritikus szempont, amelyet gyakran figyelmen kívül hagynak. Azok a felhasználók, akik billentyűzettel irányítják a felületet, nem tudják aktiválni a :hover-t. A csak hoveren keresztül elérhető funkciók számukra hozzáférhetetlenné válnak.

WCAG 2.2 szabály (Success Criterion 1.4.13 — Content on Hover or Focus): a hover esetén megjelenő tartalomnak fókusz esetén is elérhetőnek kell lennie. Ha a hover további információkat jelenít meg (tooltip, legördülő menü), ugyanazon információknak elérhetőnek kell lenniük :focus esetén is.

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

A prefers-reduced-motion média lekérdezés — tisztelje a felhasználók rendszerbeállításait. Ha a felhasználó kikapcsolta az animációt a rendszerben, a hover-effektusokat azonnal, transition nélkül kell alkalmazni. Ez segít a vesztibuláris rendellenességekkel élőknek.

További ajánlások: ne használjon hover-t kritikus funkciókhoz, ne használjon csak színt az információk átadására hover esetén (adjon hozzá ikont vagy szöveget), és biztosítson megfelelő kontrasztot a hover-állapotokhoz.