Hover nelle interfacce: cos’è, tipi di effetti e implementazione

Cos’è l’hover nel web design

Hover (dall’inglese “to hover”) — una reazione visiva di un elemento dell’interfaccia quando il cursore del mouse si trova sopra di esso. Il termine viene utilizzato per riferirsi sia alla pseudo-classe CSS :hover che allo stato dell’elemento al passaggio del mouse.

Il concetto di hover ha avuto origine nelle prime interfacce grafiche dello Xerox Alto (1973) ed è stato standardizzato sul web con l’introduzione di CSS2 nel 1998. Da allora, l’hover è diventato parte integrante dell’esperienza utente su desktop.

Secondo CSS Usage Statistics (2025), il 94% dei siti nella top 1000 utilizza la pseudo-classe :hover per almeno un elemento. L’hover viene applicato più comunemente a pulsanti (89%), link (85%) e card (62%).

Differenza tra hover e altri stati

Hover ≠ active. :hover si attiva al passaggio del mouse, :active si attiva al momento del clic. :focus si attiva quando un elemento riceve il focus tramite tastiera. Ogni stato ha il suo scopo. L’hover è un’anteprima, active è una conferma dell’azione.

La pseudo-classe :hover in CSS

La pseudo-classe :hover in CSS applica stili a un elemento quando l’utente vi passa sopra il cursore del mouse. Funziona con qualsiasi elemento HTML ma viene utilizzata più comunemente con elementi interattivi.

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

La specificità del selettore :hover è la stessa di una classe (0,1,0). Se è necessario sovrascrivere l’hover per un elemento specifico, utilizzare un selettore con specificità maggiore. L’ordine di dichiarazione è importante: se :hover viene dichiarato dopo :focus, l’hover potrebbe non funzionare al focus.

Pseudo-classi combinate

:hover può essere combinato con altre pseudo-classi per creare logiche complesse. Ad esempio, .card:hover .card__title modifica lo stile del titolo all’interno della card quando si passa il mouse sull’intera card. Ciò consente di creare effetti con animazioni annidate.

Tipi di effetti hover

Gli effetti hover sono categorizzati in base al tipo di proprietà modificata. Ogni tipo è adatto a scenari diversi e crea una sensazione specifica nell’utente.

Il tipo più efficace è una combinazione di effetti di colore e ombra. Material Design consiglia di utilizzare il cambiamento di elevazione (modifica dell’altezza dell’ombra) come tipo principale di feedback hover.

Secondo Google Material Design (2024), un effetto hover dovrebbe essere evidente ma non distraente. La durata di animazione consigliata è di 200–300 millisecondi. Gli effetti troppo rapidi (meno di 100 ms) potrebbero passare inosservati, mentre quelli troppo lenti (oltre 500 ms) infastidiscono l’utente.

Transizioni CSS per effetti fluidi

La proprietà CSS transition rende gli effetti hover fluidi animando i cambiamenti delle proprietà nel tempo. Senza transition, l’hover si attiva istantaneamente, risultando brusco e sgradevole alla vista.

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

La durata della transizione dipende dal contesto. Per elementi piccoli (icone, link) — 150–200 ms. Per elementi grandi (card, modali) — 250–350 ms. La funzione di easing ease-out rallenta gradualmente l’animazione alla fine, creando una sensazione naturale.

Pratica consigliata — specificare transition per ogni proprietà animata individualmente. La proprietà all è comoda durante lo sviluppo, ma in produzione è meglio definire proprietà specifiche per l’animazione per evitare effetti imprevisti.

Hover sui dispositivi touch

Sui dispositivi touch, il concetto di hover non esiste: non c’è un cursore che possa passare sopra un elemento. Toccando un elemento si attiva immediatamente un clic, saltando lo stato hover. Ciò crea problemi se l’interfaccia si basa esclusivamente sull’hover.

Secondo StatCounter (2026), il 62% del traffico web globale proviene da dispositivi mobili. Ignorare l’assenza di hover sugli schermi touch significa perdere il controllo dell’UX per la maggior parte degli utenti.

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

La media query hover: none consente di rilevare che un dispositivo non supporta l’hover. Su tali dispositivi, gli effetti hover vengono disattivati e l’interazione si basa sugli stati :active e :focus. Una soluzione alternativa è mostrare il contenuto hover al tocco (il primo tocco mostra l’hover, il secondo esegue l’azione), ma questo modello peggiora l’UX.

Accessibilità degli effetti hover

L’accessibilità dell’hover è un aspetto critico spesso trascurato. Gli utenti che navigano nell’interfaccia con la tastiera non possono attivare :hover. Le funzionalità disponibili solo tramite hover diventano inaccessibili per loro.

Regola WCAG 2.2 (Criterio di successo 1.4.13 — Contenuto al passaggio del mouse o al focus): il contenuto che appare al passaggio del mouse deve essere disponibile anche al focus. Se l’hover mostra informazioni aggiuntive (tooltip, menu a discesa), le stesse informazioni devono essere disponibili al :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;
    }
}

La media query prefers-reduced-motion — rispettate le impostazioni di sistema dell’utente. Se l’utente ha disattivato le animazioni nel sistema, gli effetti hover devono essere applicati istantaneamente, senza transition. Questo aiuta le persone con disturbi vestibolari.

Raccomandazioni aggiuntive: non usare l’hover per funzioni critiche, non affidarti solo al colore per trasmettere informazioni al passaggio del mouse (aggiungi un’icona o del testo) e garantire un contrasto sufficiente per gli stati hover.