Ghid CSS: cum utilizezi pseudo-clasa :hover pentru efecte interactive la trecerea cursorului

În dezvoltarea web modernă, interacțiunea vizuală joacă un rol esențial în îmbunătățirea experienței utilizatorului. Pseudo-clasa CSS :hover este probabil una dintre cele mai cunoscute și utilizate tehnici de stilizare pentru a oferi feedback vizual instantaneu la trecerea cursorului mouse-ului peste un element.

Ce este pseudo-clasa :hover și cum funcționează?

Majoritatea web designerilor sunt familiarizați cu aplicarea regulii a:hover pentru a schimba culoarea sau stilul legăturilor dintr-o pagină. Cu toate acestea, pseudo-clasa :hover nu este limitată exclusiv la etichetele de tip link (<a>); ea poate fi aplicată pe aproape orice element HTML din pagină: blocuri <div>, butoane, imagini, rânduri de tabel sau elemente de listă.

Exemplu de bază: schimbarea fundalului unui bloc

Dacă dorești ca un container sau o căsuță de conținut să își modifice culoarea de fundal atunci când utilizatorul poziționează mouse-ul deasupra ei, poți folosi următoarea regulă simplă:

/* Stilizare pentru orice div la trecerea cursorului */
div:hover {
    background-color: #e3e3e3;
}

/* Recomandat: aplicarea regulii pe o clasă specifică */
.card-articol:hover {
    background-color: #f7f9fa;
    border-color: #0073aa;
    cursor: pointer;
}

Bune practici pentru utilizarea efectului :hover

Pentru a obține un design modern și fluent, merită să ții cont de câteva recomandări importante:

• Folosește tranziții fluide (CSS transition): O schimbare bruscă a culorilor poate fi obositoare pentru ochi. Adăugarea proprietății transition: background-color 0.3s ease; pe starea inițială a elementului creează o animație lină și elegantă.
• Specificitate clară: Evită aplicarea regulii pe selectorul generic div:hover pe întreaga pagină, deoarece va afecta toate containerele. Utilizează întotdeauna clase specifice, precum .buton:hover sau .meniu-item:hover.
• Accesibilitate și dispozitive mobile: Ecranele tactile (smartphone-uri, tablete) nu au cursor de mouse, așa că nu te baza exclusiv pe :hover pentru a afișa informații critice sau meniuri esențiale navigării.

/* Exemplu complet cu tranziție lină */
.buton-demo {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

.buton-demo:hover {
    background-color: #005177;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

Prin combinarea pseudo-clasei :hover cu proprietăți moderne de tranziție și transformare, poți transforma elemente statice în componente interactive atractive pentru vizitatori.