Guida CSS interattiva: Hover

Q: Come si aggiunge un effetto hover in CSS?

Scrivi una regola con :hover dopo il selettore: .btn:hover { background: #1d4ed8; }. Le dichiarazioni si applicano mentre il puntatore è sopra l'elemento. Aggiungi transition: background 0.2s; alla regola normale per animare il cambiamento.

Q: Qual è la differenza tra :hover e :active?

:hover si applica mentre il puntatore è sopra l'elemento. :active si applica mentre lo stai premendo, da quando abbassi il tasto del mouse a quando lo rilasci. Un pulsante premuto di solito è sia in hover sia attivo.

Q: In che ordine vanno le pseudo-classi dei link?

:link, :visited, :hover, :active (ricorda LVHA, o "LoVe HAte"). Hanno la stessa specificità, quindi vince la regola scritta dopo; in qualsiasi altro ordine uno stile visited o hover può nascondere lo stile hover o active.

Q: Come si cambia il colore dei link in CSS?

Applica lo stile all'elemento a: a { color: #2563eb; }, poi a:visited { color: #7c3aed; } e a:hover { color: #1d4ed8; } per gli altri stati. Impostare color su a copre sia i link non visitati sia quelli visitati.

Come funziona :hover

:hover è una pseudo-classe che seleziona un elemento mentre il puntatore del mouse è sopra di esso. Aggiungila a qualsiasi selettore e scrivi gli stili per lo stato in hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Cambiano solo le dichiarazioni della regola :hover; tutto il resto viene ereditato da .btn. Quando il puntatore esce, l'elemento torna ai suoi stili normali.

Effetti hover fluidi con transition

Un cambiamento in hover è istantaneo, a meno che tu non aggiunga transition alla regola normale (non alla regola :hover), così si anima sia all'entrata sia all'uscita:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform e opacity sono le proprietà più leggere da animare; non spostano gli elementi intorno. Animare width, height o margin fa ricalcolare il layout della pagina a ogni fotogramma. Durate, ritardi e curve di easing sono nella pagina su CSS transition.

Colori dei link: :link, :visited, :hover, :active

I link hanno quattro stati classici, più il focus da tastiera, e l'ordine delle regole conta:

Pseudo-classe	Si applica quando
`:link`	Il link non è stato visitato
`:visited`	L'URL è nella cronologia del browser
`:hover`	Il puntatore è sopra il link
`:active`	Il link viene premuto
`:focus-visible`	Il link ha il focus da tastiera

Tutte hanno la stessa specificità, quindi quando due corrispondono vince la regola scritta dopo. Un link visitato in hover corrisponde sia a :visited sia a :hover; se :visited viene per ultimo, il colore hover non si vede mai. L'ordine sicuro è Link, Visited, Hover, Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

I browser limitano ciò che :visited può cambiare, per impedire alle pagine di leggere la tua cronologia. Funzionano solo le proprietà legate al colore (color, background-color, border-color, outline-color e poche altre), e gli script vedono sempre il valore non visitato.

:active: lo stato premuto

:active corrisponde mentre l'elemento viene premuto. Un piccolo spostamento dà al pulsante una sensazione fisica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Hover sul genitore per dare stile a un figlio

Lo stato hover appartiene all'elemento sotto il puntatore e a tutti i suoi antenati. Quindi .card:hover .title applica lo stile al titolo quando si passa sopra qualsiasi parte della card, e la stessa idea fa comparire elementi nascosti:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

La riga con :focus-within è importante: senza, chi usa la tastiera e arriva con Tab al pulsante Delete premerebbe un pulsante invisibile. Abbina ogni elemento che compare in hover a una regola di focus.

Hover sugli schermi touch

Telefoni e tablet non hanno un puntatore che resta sopra un elemento. La maggior parte dei browser mobile applica :hover al primo tocco e lo mantiene finché non tocchi da un'altra parte, quindi uno stile hover può sembrare bloccato. Due regole tengono la cosa sotto controllo:

Non mettere mai l'unico accesso a un contenuto dietro :hover. Un menu che si apre in hover deve aprirsi anche al clic.
Racchiudi gli effetti hover puramente decorativi in una media query che verifica la presenza di un vero dispositivo con hover:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Errori comuni

Uno spazio prima dei due punti. .btn :hover significa "un elemento in hover dentro .btn". Scrivi .btn:hover.
transition solo sulla regola :hover. Così l'animazione funziona all'entrata ma all'uscita torna indietro di scatto. Mettila sulla regola normale.
Ordine dei link sbagliato. Tieni :link, :visited, :hover, :active in questo ordine.
Hover senza stile di focus. Chi usa la tastiera non attiva mai :hover; dai agli elementi interattivi anche uno stile :focus-visible.
Hover su un elemento coperto da un altro. Una sovrapposizione invisibile (spesso uno pseudo-elemento assoluto) può catturare il puntatore. pointer-events: none sulla sovrapposizione risolve il problema.

Domande frequenti

Come si aggiunge un effetto hover in CSS?

Scrivi una regola con :hover dopo il selettore: .btn:hover { background: #1d4ed8; }. Le dichiarazioni si applicano mentre il puntatore è sopra l'elemento. Aggiungi transition: background 0.2s; alla regola normale per animare il cambiamento.

Qual è la differenza tra :hover e :active?

:hover si applica mentre il puntatore è sopra l'elemento. :active si applica mentre lo stai premendo, da quando abbassi il tasto del mouse a quando lo rilasci. Un pulsante premuto di solito è sia in hover sia attivo.

In che ordine vanno le pseudo-classi dei link?

:link, :visited, :hover, :active (ricorda LVHA, o "LoVe HAte"). Hanno la stessa specificità, quindi vince la regola scritta dopo; in qualsiasi altro ordine uno stile visited o hover può nascondere lo stile hover o active.

Come si cambia il colore dei link in CSS?

Applica lo stile all'elemento a: a { color: #2563eb; }, poi a:visited { color: #7c3aed; } e a:hover { color: #1d4ed8; } per gli altri stati. Impostare color su a copre sia i link non visitati sia quelli visitati.

L'hover funziona su mobile?

Gli schermi touch non hanno un puntatore da tenere sopra un elemento. La maggior parte dei browser mobile applica :hover al tocco e lo mantiene finché non tocchi altrove, e questo può lasciare uno stile hover bloccato. Racchiudi gli effetti solo hover in @media (hover: hover) e non nascondere mai contenuti essenziali dietro l'hover.

Concetti correlati