--- title: ':hover' slug: 'Web/CSS/:hover' translation_of: 'Web/CSS/:hover' ---

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 ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":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

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.

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
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}		WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}	Permete che `:hover` venga applicato ad ogni pseudo-elemento.	CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}	Definizione iniziale.