Scarica l'articolo in formato PDF

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?