La pseudo-classe CSS :hover
corrisponde quando l'utente interagisce con un elemento utilizzando una periferica di puntamento, ma non necessariamente lo attiva. È generalmente innescato quando l'utente passa sopra un elemento con il cursore (puntatore del mouse).
/* Seleziona qualsiasi elemento <a> quando "hovered" */
a:hover {
color: orange;
}
Gli stili definiti dalla pseudo-classe :active
saranno annullati da qualsiasi pseudo-classe relativa ai link susseguente (:link
, :visited
, o :active
) che abbia almeno uguale specificità. Per dare stile ai link nel modo appropriato, aggiungete la regola :hover
dopo le regole :link
e :visited
ma prima di quella :active
, così come definito nell'ordine LVHA: :link
— :visited
— :hover
— :active
.
:hover
è problematica sugli schermo touch. A seconda del browser, la pseudo-classe :hover
potrebbe non corrispondere mai, corrispondere solo per un attimo dopo il tocco di un elemento, oppure continuare a corrispondere anche dopo che l'utente ha finito di toccare e finché non tocca un altro elemento. Gli sviluppatori Web dovrebbero assicurarsi che il contenuto sia accessibile sui dispositivi con capacità di hovering limitate o inesistenti.Sintassi
:hover
Esempi
Esempio base
HTML
<a href="#">Try hovering over this link.</a>
CSS
a {
background-color: powderblue;
transition: background-color .5s;
}
a:hover {
background-color: gold;
}
Risultato
Gallery di immagini
Potete usare la pseudo-classe :hover
per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate questa demo per una possibile indicazione.
:checked
(applicata a radiobox nascosti), vedete questa demo, presa dalla pagina di riferimento di :checked.Specifiche
Specifican | Commento | Feedback |
---|---|---|
HTML Living Standard The definition of ':hover' in that specification. |
WHATWG HTML GitHub issues | |
Selectors Level 4 The definition of ':hover' in that specification. |
Permete che :hover venga applicato ad ogni pseudo-elemento. |
CSS Working Group drafts GitHub issues |
Selectors Level 3 The definition of ':hover' in that specification. |
||
CSS Level 2 (Revision 1) The definition of ':hover' in that specification. |
Definizione iniziale. |
Compatibilità Browser
BCD tables only load in the browser