Cambiare sfondo al passaggio col mouse su un DIV

[cadan2]

Salve ragazzi,
Siccome non son molto ferrato sulla grafica e sui css,
volevo chiedervi un aiutino se possibile.
Ho un menù e vorrei dar l'effetto ad ogni elemento facendo cambiar img di sfondo al div su cui passano.
Per tanto vi riporto il codice che ho scritto:

Pagina html:
<div id="coll">
<a class="coll" href="#">
[img]img/1-2.png[/img]
<div class="txt">Scommetti</div>
</a>
</div>

Css:
#coll {
width:94px;
max-height:40px;
line-height: 10px;
padding: 7px;
margin: 0;
text-align: center;
float:left;
background-image:url(img/sfd_menu_header.png);
}
a.coll {
display: Block;
}
a:hover.coll {
background-color:red;
}


In questo caso mi fa lo sfondo rosso al div "<txt>" e non come vorrei al div "<coll>".
Come risolvo?

Grazie

[ResianTaxidrive]

hai provato a scrivere a.coll:hover

[cadan2]

Ho provato a sostituire
a:hover.coll {
background-color:red;
}
con
a.coll:hover {
background-color:red;
}

ma il risultato non cambia

[ResianTaxidrive]

penso che ad a.coll tu debba dare delle dimensioni grandi quanto il div esterno; altrimenti il povero <a> non sa che dimensione prendere.

[cadan2]

Nada non mi funziona
allora ti spiego meglio...
Se nella pagina html metto cosi:
<div id="coll">
<a class="coll" href="#">
[img]img/1-2.png[/img]
<div class="txt">Scommetti</div>
</a>
</div>

Mi colora di rosso effettivamente il div contenente l'img e la scritta Scommetti
mentre se metto
<a class="coll" href="#">
<div id="coll">

[img]img/1-1.jpg[/img]
<div class="txt">Tour gioco</div>
</div>
</a>

Non mi cambia lo sfondo dell'intero div "coll" (che è un img)

[ResianTaxidrive]

ma certo perchè <a> ha bisogno di avere delle dimensioni, essendo lui un tag inline.
Prova a mettere delle dimesnioni esatte a tutti gli elementi e vedi cosa succede.

Cmq non devi mettere dei div all'interno di <a>; metti dei span a cui dai display:block;

[cadan2]

Come mai non dovrei mettere dei tag <div> all'interno di un tag <a>??

[ResianTaxidrive]

perchè è assolutamente vietato nonchè proibito dalle regole dei css mettere un tag di tipo block (in questo caso div) dentro un tag di tipo inline (in questo caso <a>)

[cadan2]

Chiaro, però io modificando il <div id="txt"> in span
praticamente perdo le proprietà quali padding-top e le altre
visto che cmq il testo devo posizionarlo rispetto all'img affianco!

[ResianTaxidrive]

no perchè a quei span assegnerai display:block e si comporteranno esattamente come un div