W3docs
it
Accedi

CSS :hover Pseudo-Classe

Scopri come funziona la pseudo-classe CSS :hover, come combinarla con le transizioni e come gestire correttamente i dispositivi touch e l'accessibilità.

La pseudo-classe :hover corrisponde a un elemento mentre il puntatore dell'utente è posizionato su di esso. Si attiva non appena il puntatore entra sull'elemento e si disattiva nel momento in cui il puntatore si allontana — senza necessità di fare clic.

Questa pagina tratta:

  • Sintassi di base e come selezionare link, pulsanti e qualsiasi elemento
  • Combinare :hover con transition per effetti animati fluidi
  • Passare il cursore su un elemento padre per rivelare o ridisegnare i figli (pattern dropdown)
  • Limitare gli stili hover con @media (hover: hover) per la compatibilità con i dispositivi touch
  • Requisiti di accessibilità e l'abbinamento con :focus / :focus-within

Sintassi

selector:hover {
  /* declarations applied while pointer is over the element */
}

Il selettore può essere qualsiasi selettore CSS valido — elemento, classe, ID o una catena di combinatori.

L'utilizzo più comune di :hover è la modifica dell'aspetto dei link di ancoraggio. Per uno stile dei link prevedibile, dichiara le regole nell'ordine LVHA: :link, :visited, :hover, :active. Questo ordine assicura che le pseudo-classi successive possano sovrascrivere quelle precedenti senza sorprese di specificità.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:hover {
        background-color: #8ebf42;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Provalo tu stesso »

Sposta il puntatore sul link per vedere il cambiamento del colore di sfondo e del testo.

Quando un link appare all'interno di un paragrafo, :hover seleziona comunque solo quell'elemento <a> — il testo circostante non viene influenzato.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
      a:hover {
        background-color: #555;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>
Provalo tu stesso »

Hover su elementi a blocco

:hover funziona su qualsiasi elemento, non solo sui link. Applicarlo a un <div> consente di creare effetti interattivi per card o pannelli.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
      div:hover {
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>
Provalo tu stesso »

Effetti hover fluidi con transition

Una regola :hover semplice cambia gli stili istantaneamente. Aggiungere una transition sul selettore base (non nella regola :hover) fa sì che il browser animi la transizione in entrambe le direzioni — quando il puntatore entra e quando esce.

.button {
  background-color: #1c87c9;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Place transition on the base rule, not :hover */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
  background-color: #145e8a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Se inserisci transition solo nella regola :hover, l'animazione viene riprodotta all'entrata ma torna istantaneamente all'uscita — un errore comune per i principianti.

Puoi applicare la transizione a più proprietà separandole con virgole, oppure usare transition: all 0.25s ease come abbreviazione (anche se selezionare proprietà specifiche è migliore per le prestazioni).

Hover su un elemento padre per stilizzare i figli

:hover può far parte di un selettore con combinatori per reagire allo stato hover del padre e stilizzare un discendente. Questa è la base dei menu di navigazione a tendina e degli effetti di rivelazione al passaggio del cursore.

/* Card image starts dimmed; brightens when the card is hovered */
.card .card-image {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.card:hover .card-image {
  opacity: 1;
}

/* Reveal an overlay label on hover */
.card .card-label {
  display: none;
}

.card:hover .card-label {
  display: block;
}

Pattern menu dropdown

.nav-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.nav-item:hover .dropdown {
  display: block;
}
Attenzione

I menu accessibili solo tramite hover non sono accessibili agli utenti da tastiera e touch. Abbina :hover con :focus-within in modo che il menu si apra anche quando un elemento figlio riceve il focus tramite navigazione da tastiera:

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

Limitare gli stili hover per i dispositivi touch

Molti dispositivi touchscreen attivano un hover simulato al tocco, il che può lasciare gli stili "bloccati" finché l'utente non tocca altrove. Per evitarlo, racchiudi le regole specifiche per hover in una media query che verifica se il dispositivo di input primario supporta realmente l'hover:

/* Only apply on devices with a real pointer (mouse, trackpad) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

La funzionalità media hover: hover è ampiamente supportata nei browser moderni. Sui dispositivi solo touch il blocco viene semplicemente ignorato, quindi gli stili base rimangono puliti.

Puoi anche combinarla con pointer: fine per selezionare dispositivi di puntamento precisi (mouse/trackpad) escludendo quelli approssimativi (touch):

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #145e8a;
  }
}

Accessibilità: abbinare :hover con :focus

Gli utenti da tastiera navigano con il tasto Tab, che attiva :focus invece di :hover. Se i tuoi stili hover trasmettono un feedback visivo importante (come l'evidenziazione dell'elemento di navigazione attivo), applica gli stessi stili a :focus in modo che gli utenti da tastiera ricevano un feedback equivalente:

/* Always pair hover and focus for interactive elements */
a:hover,
a:focus {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
  text-decoration: underline;
}

Per i componenti composti (come una card che contiene un pulsante), :focus-within ti permette di stilizzare il padre ogni volta che un figlio ha il focus:

.card:hover,
.card:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
Informazione

Molti dispositivi touch non attivano uno stato :hover persistente; toccare un elemento in genere attiva :active o :focus. Testa sempre i pattern hover interattivi su un dispositivo touch reale o con l'emulazione touch.

Effetti hover su altre proprietà

:hover non si limita ai colori. Qualsiasi proprietà CSS animabile può essere attivata o animata al passaggio del cursore:

ProprietàEffetto hover tipico
opacityDissolvenza in entrata/uscita di overlay o UI secondaria
transformScala, trasla o ruota un elemento
box-shadowAggiunge profondità a card e pulsanti
colorCambia il colore del testo o delle icone
cursorSegnala che un elemento è interattivo

Buone pratiche

  • Abbina :hover con :focus in modo che gli utenti da tastiera ricevano lo stesso feedback visivo: a:hover, a:focus { ... }.
  • Limita le animazioni solo per hover con @media (hover: hover) per evitare stati bloccati sui dispositivi touch.
  • Posiziona transition nella regola base, non dentro :hover, in modo che l'animazione si applichi in entrambe le direzioni.
  • Non nascondere contenuti essenziali che appaiono solo al passaggio del cursore — sono invisibili agli utenti touch e potrebbero non essere rilevati dagli screen reader.
  • Abbina i menu hover con :focus-within in modo che la navigazione da tastiera possa aprirli senza mouse.
  • Segui l'ordine LVHA per stilizzare i link: :link, :visited, :hover, :active.

Supporto browser

:hover è supportato in tutti i browser moderni e lo è stato sin da IE 7 per la maggior parte degli elementi (IE 6 lo supportava solo sui tag <a>). La funzionalità media @media (hover: hover) è supportata in Chrome 41+, Firefox 64+, Safari 9+ e Edge 79+.

Esercitazione

Pratica
Qual è lo scopo del selettore :hover in CSS?
Qual è lo scopo del selettore :hover in CSS?
Was this page helpful?