: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 (: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.

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.

Specifiche

Compatibilità Browser

Vedi anche

• Chromium bug #370155: Don't make :hover sticky on tap on sites that set a mobile viewport
• Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.