:hover

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

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.

Nota: La pseudo-classe :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

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.

Nota: Per un effetto analogo, ma basato sulla pseudo-classe :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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:hoverChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1
Notes
Full support 1
Notes
Notes As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.
Samsung Internet Android Full support 1.0
<a> element support
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
All elements support
Non-standard
Chrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 5381673.
Firefox Full support 1IE Full support 7
Notes
Full support 7
Notes
Notes In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 926665.
Notes In Internet Explorer 9 (and possibly earlier), if a <table> has a parent with a non-auto width, overflow-x: auto;, the <table> has enough content to horizontally overflow its parent, and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; (the % unit must be specified, since unitless and px don't work) on the <table>'s parent element.
Opera Full support 7Safari Full support 2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Pseudo-element supportChrome Full support 1Edge Full support 12Firefox Full support 28IE Full support 11Opera Full support 15Safari Full support 2WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 28Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

Vedi anche