Hover în interfețe: ce este, tipuri de efecte și implementare

Ce este hover în web design

Hover (din engleză hover — a pluti) — reacția vizuală a unui element de interfață la trecerea cursorului mouse-ului peste el. Termenul este folosit atât pentru pseudo-clasa CSS :hover, cât și pentru starea elementului la trecerea cursorului.

Conceptul de hover a apărut în primele interfețe grafice Xerox Alto (1973) și a fost standardizat pe web odată cu apariția CSS2 în 1998. De atunci, hover a devenit o parte integrantă a experienței utilizatorului pe desktop.

Conform CSS Usage Statistics (2025), 94% din site-urile din top 1000 folosesc pseudo-clasa :hover pentru cel puțin un element. Cel mai frecvent, hover este utilizat pentru butoane (89%), linkuri (85%) și carduri (62%).

Diferența dintre hover și alte stări

Hover ≠ active. :hover se activează la trecerea cursorului, :active — în momentul clicului. :focus se activează la focalizarea cu tastatura. Fiecare stare își rezolvă sarcina. Hover este previzualizare, active este confirmarea acțiunii.

Pseudo-clasa :hover în CSS

Pseudo-clasa :hover în CSS aplică stiluri unui element atunci când utilizatorul trece cursorul mouse-ului peste el. Funcționează cu orice element HTML, dar cel mai des este folosită cu elemente interactive.

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

Specificitatea selectorului :hover — aceeași ca a clasei (0,1,0). Dacă trebuie să suprascrieți hover-ul pentru un element specific, folosiți un selector cu specificitate mai mare. Ordinea declarațiilor este importantă: dacă declarați :hover după :focus, hover-ul poate să nu funcționeze la focalizare.

Pseudo-clase combinate

:hover poate fi combinat cu alte pseudo-clase pentru a crea logică complexă. De exemplu, .card:hover .card__title schimbă stilul titlului din interiorul cardului la trecerea cursorului peste întregul card. Acest lucru permite crearea de efecte cu animație imbricată.

Tipuri de efecte hover

Efectele hover se împart în mai multe categorii după tipul proprietății modificate. Fiecare tip este potrivit pentru scenarii diferite și creează o anumită senzație utilizatorului.

Cel mai eficient tip — combinația efectelor cromatice și de umbră. Material Design recomandă utilizarea modificării înălțimii umbrei ca tip principal de feedback hover.

Conform Google Material Design (2024), efectul hover trebuie să fie vizibil, dar care nu distrage atenția. Durata recomandată a animației — 200–300 de milisecunde. Efectele prea rapide (sub 100 ms) pot trece neobservate, cele prea lente (peste 500 ms) irită utilizatorul.

Tranziții CSS pentru efecte fluide

Proprietatea CSS transition face efectele hover fluide, animând schimbarea proprietăților în timp. Fără transition, hover-ul acționează instantaneu, ceea ce arată sacadat și este neplăcut pentru ochi.

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

Durata transition depinde de context. Pentru elemente mici (iconițe, linkuri) — 150–200 ms. Pentru elemente mari (carduri, ferestre modale) — 250–350 ms. Funcția easing ease-out încetinește treptat animația la sfârșit, creând o senzație naturală.

Practică recomandată — specificați transition pentru fiecare proprietate animată separat. Proprietatea all este convenabilă în faza de dezvoltare, dar în producție este mai bine să definiți proprietăți specifice pentru animație, pentru a evita efecte neașteptate.

Hover pe dispozitive tactile

Pe dispozitivele tactile conceptul de hover nu există: nu există cursor care poate fi trecut peste un element. Atingerea elementului activează imediat click, ocolind starea hover. Acest lucru creează probleme dacă interfața se bazează exclusiv pe hover.

Conform StatCounter (2026), 62% din traficul web global provine de pe dispozitive mobile. A ignora lipsa hover-ului pe ecrane tactile înseamnă a pierde controlul asupra UX pentru majoritatea utilizatorilor.

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

Interogarea media hover: none permite determinarea că dispozitivul nu suportă trecerea cursorului. Pe astfel de dispozitive, efectele hover sunt dezactivate, iar interacțiunea se bazează pe stările :active și :focus. Soluție alternativă — afișarea conținutului hover la atingere (prima atingere arată hover-ul, a doua execută acțiunea), dar acest model înrăutățește UX.

Accesibilitatea efectelor hover

Accesibilitatea hover — un aspect critic adesea neglijat. Utilizatorii care controlează interfața cu tastatura nu pot activa :hover. Funcțiile disponibile doar prin hover devin inaccesibile pentru ei.

Regula WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): conținutul care apare la hover trebuie să fie accesibil și la focus. Dacă hover-ul arată informații suplimentare (tooltip, meniu derulant), aceleași informații trebuie să fie accesibile la :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;
    }
}

Interogarea media prefers-reduced-motion — respectați setările de sistem ale utilizatorilor. Dacă utilizatorul a dezactivat animația în sistem, efectele hover trebuie aplicate instantaneu, fără transition. Acest lucru ajută persoanele cu tulburări vestibulare.

Recomandări suplimentare: nu utilizați hover pentru funcții critice, nu folosiți doar culoarea pentru a transmite informații la hover (adăugați o iconiță sau text) și asigurați contrast suficient pentru stările hover.