Oggi mi è stato chiesto come utilizzare la proprietà css :hover.
Ad esempio: Il nostro obiettivo è quello di ottenere un cambiamento del colore di un link al passaggio del mouse su di esso.
Partiamo da una struttura molto semplice:
html:
1 2 3 4 5 6 7 8 9 10 11 12 | < !doctype html> <html> <head> <title>Prova effetto hover </title> <meta charset="utf-8" /> <link rel="stylesheet" href="./css/style.css" type="text/css" /> </head> <body> <a href="#">PASSA IL MOUSE SOPRA</a> </body> </html> |
il css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | html, body{ margin:0; padding:0; text-align:center; background-color:black; } a{color:#fff;} /*Ho deciso di avere dei link bianchi */ /*Ecco due esempi di utilizzo della proprietà hover*/ a:hover{ background-color:yellow;} /*Al passaggio del mouse sull'elemento, viene cambiato lo sfondo a giallo*/ a:hover{ color:red;} /*Al passaggio del mouse sull'elemento, il colore (del testo) cambia a rosso*/ /*Siccome in questo css, ho lasciato entrambe le proprietà il risultato sarà che al passaggio del mouse sul link, avrò sfondo giallo e testo rosso!*/ |
Ovviamente io ho utilizzato la proprietà :hover su un link, nessuno ti vieta di utilizzarla su qualsiasi altro tag!
Scarica da qui i sorgenti.
Buon lavoro! Ti è risultato utile?
Lascia un commento