CSS, cambiare colore dei link al passaggio del mouse

di Michele Costanzo Commenta

CSS Link Hover
Quando in una pagina HTML si passa con il mouse su di un collegamento, il relativo testo cambia colore. Attraverso i fogli di stile CSS è possibile personalizzare questo comportamento scegliendo un colore differente rispetto a quello predefinito impostato nel browser.

L’uso del selettore a:hover nei CSS

Ogni browser grafico visualizza i collegamenti con delle convenzioni grafiche particolari che li rendano più facilmente riconoscibili. Nella maggior parte dei casi un link è rappresentato con un testo blu sottolineato che diventa viola se il collegamento è già stato visitato. Passando il mouse sul collegamento il testo viene rappresentato solitamente con un colore rosso. Si tratta di impostazioni convenzionali seguite dalla maggior parte dei browser e comunque personalizzabili anche dall’utente. Ciò che interessa in questa sede tuttavia è la possibilità di modificare questo comportamento predefinito attraverso i fogli di stile CSS. Nel caso specifico del colore dei link al passaggio del mouse utilizzeremo il selettore a:hover con un semplice codice di questo tipo:

a:hover {
  color: #009900;
}

Analisi del codice

Come si può notare il codice CSS da utilizzare è estremamente semplice. Attraverso il selettore a:hover si limita la validità del codice ai link e limitatamente al passaggio del mouse senza quindi modificare altri aspetti come il colore di default dei link o il colore dei link visitati di cui ci occuperemo in una prossima guida. Attraverso la proprietà color si va quindi a definire il colore che i link dovranno assumere al passaggio del mouse. Nell’esempio è stato scelto un colore verde definito attraverso un codice esadecimale.

Il risultato di questa istruzione CSS è mostrato nell’immagine che accompagna questo post.

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>