Rollover disgiunti con soli css [era: Cambiare lo sfondo di un div all'a:hover]

[Dave-Z]

Mi spiego meglio (scusate ma non riuscivo a trovare un titolo migliore):

ho 2 div, racchiusi in un 3° div contenitore:

<div id="contenitore">
 <div id="a">
 </div>
 <div id="b">
 </div>
</div>

io vorrei che all'hover di "B", "A" cambiasse lo sfondo. Si può fare? se si come?

[awd]

dicasi rollover disgiunto!
puoi farlo con javascript oppure leggiti questo articolo http://www.extrowebsite.com/articolocss.asp?ID=47

[Dave-Z]

grazie per il link, ma ho risolto da solo

ed il risultato è un menu che sembra quasi sia fatto in flash:

http://davesol.altervista.org/menu_css/css_menu.htm

lasciate perdere il lato estetico ed il fatto che l'immaggine che viene caricata sia un po' troppo pesante (è solo una prova), ma l'idea per creare dei "cool menu" mi sembra che ci stia tutta

[awd]

beh è una semplice gif animata!

cmq interessante in sistema che hai usato, però non so se è possibile far contenere un DIV in un A
...e infatti il validatore storce il naso!
infatti un un elemento inline come A non può contenere un elemento blocco come DIV!

[Dave-Z]

Originariamente inviato da awd
...e infatti il validatore storce il naso!

non avevo provato a validarlo...

però funziona anche su ie

[Dave-Z]

Originariamente inviato da Dave-Z
non avevo provato a validarlo...

però funziona anche su ie

ho risolto! ho rimpiazzato i div con degli span, ora è valido!


http://davesol.altervista.org/menu_css_2/css_menu.htm

[pierofix]

Ma per fare una cosa del genere non ti conviene fare una sola immagine di sfondo, in cui la fascia superiore si anima o si colora al passaggio del mouse.

Ovvero, invece di avere sei "box" su due file, ne hai tre e la fila superiore non è altro che una fascia ottenuta tramite immagine: questa immagine sarà quindi formata inferiormente da una parte nera ed il resto come già descritto.

Oltre ad un codice più pulito, eviti anche div o span inutili e non semantici.

[Dave-Z]

Originariamente inviato da pierofix
Ma per fare una cosa del genere non ti conviene fare una sola immagine di sfondo, in cui la fascia superiore si anima o si colora al passaggio del mouse.

Ovvero, invece di avere sei "box" su due file, ne hai tre e la fila superiore non è altro che una fascia ottenuta tramite immagine: questa immagine sarà quindi formata inferiormente da una parte nera ed il resto come già descritto.

Oltre ad un codice più pulito, eviti anche div o span inutili e non semantici.

ma come dici tu, non potrei avere 2 effetti differenti...
cioè non posso dare uno sfondo di un colore od un background diverso...

no, penso che la mia sia la soluzione migliore.

[Dave-Z]

l'unica cosa che mi fa imbestialire è che con ie, l'immagine superiore mi viene stirata a 16px, quando dovrebbe essere alta 10

...non riesco a trovare una soluzione

[kaze]

Non sò se è 1 hachk ma una volta ho risolto un problema simile in qst modo

height:10px
height=10px;

Non sò se è sematicamente corretto ma tentar non nuoce