:hover :focus :active e :visited
Definisca lo stile degli stati interattivi di link e pulsanti utilizzando le pseudo-classi CSS più comuni.
:hover :focus :active e :visited è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cosa sono le pseudo-classi?
Le pseudo-classi selezionano gli elementi in base al loro stato o alla relazione con altri elementi. Iniziano con un singolo due punti : e non richiedono l'aggiunta di attributi all'HTML.
:hover
:hover si applica quando il puntatore dell'utente si trova sopra un elemento. È il selettore di stato interattivo più comune.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus si applica quando un elemento riceve il focus (tramite il tasto Tab della tastiera o con il focus programmatico). È fondamentale per l'accessibilità.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible è una versione più intelligente di :focus: mostra l'indicatore del focus solo quando il focus è stato ricevuto tramite la tastiera, non tramite il mouse. In questo modo gli utenti della tastiera vedono gli indicatori del focus senza gli anelli che compaiono facendo clic con il mouse.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within si applica a un elemento quando uno qualsiasi dei suoi discendenti ha il focus. È utile per applicare stili ai contenitori dei moduli o alle barre di ricerca quando sono attivi.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active si applica mentre un elemento viene attivato, durante un clic del mouse o un tocco. Crea un riscontro visivo per gli elementi interattivi.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited applica stili ai link già visitati dall'utente. Per motivi di privacy, solo un insieme limitato di proprietà può essere stilizzato con :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Ordine degli stati dei link (LVHA)
Quando applica stili a tutti e quattro gli stati dei link, segua l'ordine LVHA per evitare problemi di specificità: Link, Visited, Hover, Active.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover sui dispositivi touch
I touchscreen non hanno uno stato hover nello stesso modo dei mouse. :hover può attivarsi brevemente durante un tocco. Per le interazioni specifiche dei dispositivi touch, utilizzi :active o la media query @media (hover: none).
Combinare gli stati
Le pseudo-classi possono essere concatenate per applicare stili a più stati contemporaneamente:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Transizione degli stati hover
Per ottenere effetti hover fluidi, utilizzi le transizioni nello stato di base (non nello stato :hover), così la transizione viene eseguita in entrambe le direzioni:
<button class="btn demo-hover">Hover transitions smoothly</button>
Verifica rapida
Quale pseudo-classe mostra gli stili del focus solo durante la navigazione da tastiera, non quando si fa clic con il mouse?
Riepilogo
:hover si attiva quando il puntatore si trova sopra un elemento; :focus quando un elemento riceve il focus; :active durante un clic; :visited per i link visitati. Utilizzi :focus-visible per mostrare gli indicatori del focus solo durante la navigazione da tastiera. Segua l'ordine LVHA per gli stati dei link. Fornisca sempre indicatori del focus visibili per garantire l'accessibilità.
Domande Frequenti
La lezione «:hover :focus :active e :visited» è gratuita?
Sì — il testo completo di «:hover :focus :active e :visited» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «:hover :focus :active e :visited»?
Definisca lo stile degli stati interattivi di link e pulsanti utilizzando le pseudo-classi CSS più comuni. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «:hover :focus :active e :visited»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e pseudo-classi dello stato dei form