Ciao a tutti,

premetto che sono un principiante.
Vorrei chiedervi dove sto sbagliando.
Vorrei creare un div con effetto a:hover, affinché quando l'utente passi il mouse sul div questo si illumini.
Ho un'immagine di sfondo e in corrispondenza di alcuni punti ho inserito dei div che contengono un'immagine "illuminata".
Il codice è questo:

codice:
/*questo è il div con l'immagine di sfondo*/
#sfondo  {
    width: 1280px;
    height: 900px;
    background-image: url(immagini/background.jpg); 
    background-repeat: no-repeat;
            }

/*questo è il div che si illumina e pulsante1.jpg è l'immagine illuminata*/
#div1  {
    width:267px;
    height:204px;
    float:left;
    margin-left:40px;
    margin-top:0px;
            }
            
a.div1{
    width: 267px;
    height: 204px;
    display:block;    
            }
            
a.div1:hover  {
    background: url(immagini/pulsante1.jpg) no-repeat 0 0;
            }

L'HTML è questo:

codice:
<div id="sfondo">
<a href="link.html"><div id="div1"></div></a>
</div>

Sbaglio qualcosa?

Grazie a tutti e buon lavoro