nicht angemeldet
Hallo, also ich habe folgendes Problem:
Ich habe 5 Divs, wenn ich über eines der 5 drüber fahre, egal welches, möchte ich dass ein Ereignis bei allen 4 DIVs (in diesem Fall anzeigen eines Bildes) ausgelöst wird.
Dazu habe ich folgendes CSS:
div.invi_clothes_1 {width:218px; height:103px; visibility:visible; position:absolute; left:0px; top:113px;}
div.invi_clothes_2 {width:44px; height:144px; visibility:visible; position:absolute; left:268px; top:123px;}
div.invi_clothes_3 {width:30px; height:58px; visibility:visible; position:absolute; left:197px; top:161px;}
div.invi_clothes_4 {width:28px; height:43px; visibility:visible; position:absolute; left:215px; top:263px;}
div.invi_clothes_5 {width:139px; height:59px; visibility:visible; position:absolute; left:177px; top:310px;}
div.invi_clothes_1:hover div.visi_clothes_1, div.visi_clothes_2, div.visi_clothes_3, div.visi_clothes_4, div.visi_clothes_5 {visibility:visible;}
div.invi_clothes_2:hover div.visi_clothes_1,div.visi_clothes_2,div.visi_clothes_3,div.visi_clothes_4,div.visi_clothes_5 {visibility:visible;}
div.invi_clothes_3:hover div.visi_clothes_1,div.visi_clothes_2,div.visi_clothes_3,div.visi_clothes_4,div.visi_clothes_5 {visibility:visible;}
div.invi_clothes_4:hover div.visi_clothes_1,div.visi_clothes_2,div.visi_clothes_3,div.visi_clothes_4,div.visi_clothes_5 {visibility:visible;}
div.invi_clothes_5:hover div.visi_clothes_1,div.visi_clothes_2,div.visi_clothes_3,div.visi_clothes_4,div.visi_clothes_5 {visibility:visible;}
div.visi_clothes_1 {width:218px; height:103px; background-image:url(high/highlite_clothes01.JPG); visibility:hidden; position:absolute;}
div.visi_clothes_2 {width:44px; height:144px; background-image:url(high/highlite_clothes02.JPG); visibility:hidden; position:absolute;}
div.visi_clothes_3 {width:30px; height:58px; background-image:url(high/highlite_clothes03.JPG); visibility:hidden; position:absolute;}
div.visi_clothes_4 {width:28px; height:43px; background-image:url(high/highlite_clothes04.JPG); visibility:hidden; position:absolute;}
div.visi_clothes_5 {width:139px; height:59px; background-image:url(high/highlite_clothes05.JPG); visibility:hidden; position:absolute;}
UND folgenden HTML Code:
<div class="invi_clothes_1">
<a href="equipment_normal_clothes.html" alt="Handschuhe" title="Handschuhe"><div class="visi_clothes_1"></div></a>
</div>
<div class="invi_clothes_2">
<a href="equipment_normal_clothes.html" alt="Handschuheas" title="Handschuheas"><div class="visi_clothes_2"></div></a>
</div>
<div class="invi_clothes_3">
<a href="equipment_normal_clothes.html" alt="Handsaschuhe" title="Handschuhsse"><div class="visi_clothes_3"></div></a>
</div>
<div class="invi_clothes_4">
<a href="equipment_normal_clothes.html" alt="Handscashuhe" title="Handschssuhe"><div class="visi_clothes_4"></div></a>
</div>
<div class="invi_clothes_5">
<a href="equipment_normal_clothes.html" alt="Handscsadasdhuhe" title="Handsddchuhe"><div class="visi_clothes_5"></div></a>
</div>
Ich habe nun glaube ich den Grund für das Problem gefunden, und zwar dass das Hover Attribut nur auf DIVs wirkt die sich innerhalb des DIVs mit der Hover Eigenschaft befinden
div.invi_clothes_5:hover div.visi_clothes_1,div.visi_clothes_2,div.visi_clothes_3,div.visi_clothes_4,div.visi_clothes_5 {visibility:visible;}
Ich nehme an dass es nicht funktioniert, da die DIVS clothes_01 - clothes_04
keine Kinder-Elemente von clothes_1 sind.
Jetzt Frage ich mich wie ich das Ganze trotzdem mit CSS realisieren könnte?