CSS-Hover-Effekt funktioniert nicht in IE6

[Günther S]

Hallo zusammen,
ich habe ein Menü mit Buttons dieser Art zusammengestellt:

#button a{
display: block;
}
#button a span{
display: none;
}

#button a:hover span{
display: block;
}

<div id="button"><a href="news.php"><span><img src="news.jpg"></span></a></div>

Sobald man über die maus auf die div mit der id "button" bewegt, sollte das Bild news.jpg angezeigt werden (Im Hintergrund ist bereits ein Bild, woran man erkennen kann, wohin man die Maus bewegen muss).
In Netscape 7, Opera 8 und Firefox 1.0.3 funktioniert alles bestens, nur der IE6 will den Hover-Effekt nicht anzeigen.
Woran kann das liegen?

Gruß und vielen Dank für eure Hilfe im Voraus,
Günther S.

[Mel]

Der IE kennt den hover-Effekt nur beim <a>-Tag...daran liegt es.

vg, mel

[Günther S]

Der IE kennt den hover-Effekt nur beim <a>-Tag...daran liegt es.

vg, mel

Aber der hover-Effekt ist doch beim a-Tag angewandt:

#button a:hover span{
display: block;
}

Gruß,
Günther

[MudGuard]

Hi,

Aber der hover-Effekt ist doch beim a-Tag angewandt:

Wenn sich beim a-Element beim :hover nichts ändert, schafft es der IE auch nicht, Änderungen beim Inhalt von a zu berücksichtigen.

cu,
Andreas

[Günther S]

Hallo,

Wenn sich beim a-Element beim :hover nichts ändert, schafft es der IE auch nicht, Änderungen beim Inhalt von a zu berücksichtigen.

das bedeutet, ich muss nur bei a:hover irgendetwas (was u.U. gar nicht von bedeutung ist) ändern, damit der IE auch die tags innerhalb des a-Tags ändert?
also so z.B.:

#button a{
color: blue; /* Belanglos für das Layout, da nur Bilder innerhalb des a-Tags sind */
display: block;
}
#button a:hover{
color: red; /* Farbe ändert sich */
}
#button a span{
display: none;
}

#button a:hover span{
display: block;
}

<div id="button"><a href="news.php"><span><img src="news.jpg"></span></a></div>

Aber genau das habe ich gerade versucht, das funktioniert auch nicht :(

Bitte erläutere das doch noch etwas genauer oder gib mir noch einen Denkanstoß, irgendwo komm ich grade nicht weiter..
Gruß,
Günther

[Maxx]

Hallo Günther,

das bedeutet, ich muss nur bei a:hover irgendetwas (was u.U. gar nicht von bedeutung ist) ändern, damit der IE auch die tags innerhalb des a-Tags ändert?

#button a:hover{
color: red; /* Farbe ändert sich */

ob color funktioniert habe ich noch nicht ausprobiert. Ich verwende in so einem Fall:
#button a:hover {border-style:none;} klappt zuverlässig.

Grüße,

Jochen

[Ingo Turski]

Hi,

exakt an dieser Stelle hatte ich heute nacht eine Antwort gepostet (daß "irgendwas" zu ändern nicht reicht und background eine recht zuverlässige Eingenschaft gegen diesen Bug ist) und kann mir nicht vorstellen, daß ich sie nicht abgeschickt oder daß sie nicht angenommen wurde. Nu isse wech... Ist immer noch was kaputt?

freundliche Grüße
Ingo

[Hopsel]

Hi,

Aber der hover-Effekt ist doch beim a-Tag angewandt:

#button a:hover span{
display: block;
}

nö. So wie ich das sehe, ändert sich zwar etwas, wenn du mit dem Mauszeiger über <a> fährst, aber was sich ändert ist ein <span>, kein <a>. :)

Vielleicht hilft dir dieser Link weiter: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

MfG Hopsel

[Struppi]

Hallo Günther S

Hallo zusammen,
ich habe ein Menü mit Buttons dieser Art zusammengestellt:

#button a{
display: block;
}
#button a span{
display: none;
}

#button a:hover span{
display: block;
}

Der IE hat hier (noch) einen bug

http://www.quirksmode.org/css/ie6_purecsspopups.html

Struppi.