Miglioramento degli Stili con Pseudo-Classi di Azione dell'Utente
Le pseudo-classi di azione utente stilizzano un elemento interattivo in base al suo stato attuale. Aiutano a incoraggiare gli utenti e a informarli su ciò che è appena accaduto. Generalmente, aggiungiamo le pseudo-classi di stato agli elementi <button> e <a>.
La sintassi è la seguente:
selector:pseudo-class {
property: value;
}
selectorpuò essere qualsiasi selettore considerato nei capitoli precedenti;pseudo-classrichiede:prima della dichiarazione e non si aggiunge alcuno spazio.
Nota
Considereremo le pseudo-classi di stato più utili (
hover,focus,activeevisited).
:hover
La pseudo-classe :hover viene utilizzata per rispondere alle azioni dell'utente quando interagisce con un elemento tramite un dispositivo di puntamento, come il passaggio del puntatore del mouse sull'elemento. Possiamo testare questo comportamento nel seguente esempio passando il mouse sugli elementi button e a per vedere l'effetto.
index.html
styles.css
:focus
La pseudo-classe :focus funziona in modo simile alla pseudo-classe :hover. Risponde al focus sull'elemento, che viene solitamente ottenuto tramite la navigazione da tastiera utilizzando il tasto "Tab". Per garantire coerenza nel comportamento degli elementi interattivi per tutti gli utenti, si consiglia di utilizzare entrambe le pseudo-classi insieme per la stilizzazione. In questo modo, sia gli utenti che navigano con il mouse sia quelli che utilizzano la tastiera avranno la stessa esperienza.
La differenza tra :hover e :focus
:hoverreagisce all'attività del cursore del mouse;:focusreagisce all'attività della tastiera (tasto "Tab").
Nel seguente esempio, abbiamo lo stesso elemento con diverse pseudo-classi. Prestare attenzione al file styles.css. Si può notare che è possibile aggiungere gli stessi stili per gli effetti hover e focus separando il selettore e la pseudo-classe con ,.
index.html
styles.css
:active
:active viene attivato quando un elemento viene attivato, ad esempio facendo clic su un link. Sebbene qualsiasi elemento possa essere attivato, questa pseudo-classe viene generalmente utilizzata per link e pulsanti.
index.html
styles.css
:visited
La pseudo-classe :visited si applica ai link che sono già stati visitati. Per impostazione predefinita, i link vengono visualizzati in blu e diventano viola dopo essere stati visitati.
index.html
styles.css
1. Quale pseudo-classe viene attivata quando un utente passa il mouse sopra un elemento?
2. Quale pseudo-classe viene applicata a un link che è già stato visitato?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.56Miglioramento degli Stili con Pseudo-Classi di Azione dell'Utente
Scorri per mostrare il menu
Le pseudo-classi di azione utente stilizzano un elemento interattivo in base al suo stato attuale. Aiutano a incoraggiare gli utenti e a informarli su ciò che è appena accaduto. Generalmente, aggiungiamo le pseudo-classi di stato agli elementi <button> e <a>.
La sintassi è la seguente:
selector:pseudo-class {
property: value;
}
selectorpuò essere qualsiasi selettore considerato nei capitoli precedenti;pseudo-classrichiede:prima della dichiarazione e non si aggiunge alcuno spazio.
Nota
Considereremo le pseudo-classi di stato più utili (
hover,focus,activeevisited).
:hover
La pseudo-classe :hover viene utilizzata per rispondere alle azioni dell'utente quando interagisce con un elemento tramite un dispositivo di puntamento, come il passaggio del puntatore del mouse sull'elemento. Possiamo testare questo comportamento nel seguente esempio passando il mouse sugli elementi button e a per vedere l'effetto.
index.html
styles.css
:focus
La pseudo-classe :focus funziona in modo simile alla pseudo-classe :hover. Risponde al focus sull'elemento, che viene solitamente ottenuto tramite la navigazione da tastiera utilizzando il tasto "Tab". Per garantire coerenza nel comportamento degli elementi interattivi per tutti gli utenti, si consiglia di utilizzare entrambe le pseudo-classi insieme per la stilizzazione. In questo modo, sia gli utenti che navigano con il mouse sia quelli che utilizzano la tastiera avranno la stessa esperienza.
La differenza tra :hover e :focus
:hoverreagisce all'attività del cursore del mouse;:focusreagisce all'attività della tastiera (tasto "Tab").
Nel seguente esempio, abbiamo lo stesso elemento con diverse pseudo-classi. Prestare attenzione al file styles.css. Si può notare che è possibile aggiungere gli stessi stili per gli effetti hover e focus separando il selettore e la pseudo-classe con ,.
index.html
styles.css
:active
:active viene attivato quando un elemento viene attivato, ad esempio facendo clic su un link. Sebbene qualsiasi elemento possa essere attivato, questa pseudo-classe viene generalmente utilizzata per link e pulsanti.
index.html
styles.css
:visited
La pseudo-classe :visited si applica ai link che sono già stati visitati. Per impostazione predefinita, i link vengono visualizzati in blu e diventano viola dopo essere stati visitati.
index.html
styles.css
1. Quale pseudo-classe viene attivata quando un utente passa il mouse sopra un elemento?
2. Quale pseudo-classe viene applicata a un link che è già stato visitato?
Grazie per i tuoi commenti!
