link con cambio colore al passaggio del mouse in html

Pubblicato da progettandopc il

Dopo aver visto come inserire un link in html [trovi qui l’articolo] oggi proseguiamo vedendo come inserire un link che cambia colore al passaggio del mouse.

Prima di tutto inseriamo un classico link nel seguente modo:

<a href="URL">testo del link</a>

Successivamente utilizziamo la proprietà A:hover per creare il cambio colore al passaggio del mouse. Per farlo puoi utilizzare il seguente codice:

<style type="text/css">
A:hover
{
color: green
}
</style>

E’possibile sostituire la parola “green” con il colore che si vuole andare ad inserire.

Se volessi creare un link che riporta alla home page di questo sito web utilizzerei dunque il seguente codice:

<style type="text/css">
A:hover
{
color: green
}
</style>
<a href="https://www.progettandopc.com">home page</a>

il link diventa di colore verde al passaggio del mouse:


link con background che cambia colore al passaggio del mouse

In questo caso dobbiamo effettuare una piccola modifica al codice precedente, utilizzando sempre la proprietà A:hover, pertanto avremo il seguente codice:

<style type="text/CSS">
A:hover
{
background:green
}
</style>

Se volessi creare un link che rimanda alla home page di questo sito web con background che cambia al passaggio del mouse utilizzerei dunque il seguente codice:

<style type="text/CSS">
A:hover
{
background:green
}
</style>
<a href="https://www.progettandopc.com">home page</a>

Il background del link varia al passaggio del mouse:

Se vuoi modificare il colore del link o la dimensione puoi trovare [qui] un articolo molto dettagliato.