Div con effetto a.hover

[treteo]

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:

/*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:

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

Sbaglio qualcosa?

Grazie a tutti e buon lavoro

[m4rko80]

Ciao, i selettori non sono corretti.

#sfondo e' il contenitore e ok.
Per il resto hai:

a {} //tag link

e

a #div1 {} //il div con ID div1 all'interno di a

a.div1 vuol dire che stai cercando il tag a con classe uguale a div1

Gli spazi fanno differenza, senza spazio vuole dire il tag o selettore che indichi all'inizio e che ha anche la classe o id che segue.
Con spazio vuole dire il tag o selettore che indichi e al suo interno vai a prendere il tag o selettore indicato dopo

[treteo]

Gentile m4rko80,

grazie per la risposta.
Purtroppo ho difficoltà a capire quanto hai scritto.
Di quale spazio parli?
Ho capito che devo modificare qualcosa, ma cosa esattamente?
Ti chiedo scusa, ma evidentemente le mie conoscenze non mi permettono di comprendere il tuo messaggio.
Grazie ancora.

[treteo]

Scusate nuovamente,
prima di scrivere una nuova risposta ho provato a documentarmi, ma probabilmente sto cercando termini non appropriati.
Qualcuno può illuminarmi sul concetto di "senza spazio" e "con spazio" o indicarmi una risorsa che mi permetta di comprendere meglio.
Grazie a tutti.
Prometto di non proseguire oltre.

[m4rko80]

Ciao, qui c'e' una guida sui selettori css.
In un fogio di stile css (il file .css appunto) lo spazio tra un selettore e l'altro sta ad indicare che stai cercando un determinato selettore che sta a livello di html al di sotto di.... ( il precedente).
Es.:

#one {} //il tag html con id = one

#one a {} // il tag a(link html) che sta all'interno del div con id one

#one.test {} //Il tag con id one che ha anche la classe test, se ci fosse lo spazio fra #one e .test sarebbe invece il tag con classe test all'interno del tag con id one

[treteo]

Perfetto.
Ti ringrazio m4rko80 per la nuova risposta e per la risorsa che mi hai segnalato.
Ho sistemato il codice e ora tutto funziona come volevo.

C'è sempre da imparare