Programmazione Web » Css » Cambiare l'aspetto di un link grazie al rollover
Cambiare l'aspetto di un link grazie al rollover
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1131 volte
Oggi vediamo com'è possibile trasformare l'aspetto di un link quando il mouse vi passa sopra!
Essenzialmente si tratta di un rollover che, con i css, va impostato così:
- a:link è lo stato normale di un link
- a:hover è lo stato rollover di un link
Pertanto dobbiamo impostare questi stili per ottenere l'effetto desiderato...
Ecco alcune proprietà dei css da utilizzare:
- text-decoration: none; elimina la sottolineatura da un link
- text-decoration: underline; aggiunge la sottolineatura a un link
- font-weight: bold; attribuisce il grassetto al link
- color: red; definisce il colore del link
- background-color: red; attribuisce il colore rosso allo sfondo del link
Pertanto, supponiamo di volere un link di colore rosso non sottolineato che, al passaggio del mouse, diventi blu e sottolineato... ecco come fare:
Copiate e incollate questo codice nella vostra pagina web tra i tag <head> e </head>
<style>
a:link {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
</style>
Inserite un collegamento e il gioco è fatto! Modificate le proprietà dei collegamenti a vostro piacimento.
Aggiungi questo tutorial ai preferiti
