Hallo,
ich habe einen Link, der aus einem Text (font) und einem Bereich mit Hintergrundbild (span) besteht. Beim Mouseover soll sowohl die Schriftfarbe, als auch das Hintergrundbild geändert werden (gemeinsames Hovern). Das Ganze soll ohne Javascript mit CSS passieren.
Ich habe es mit :hover im CSS versucht: Im FF klappt alles einwandfrei, im IE funktioniert es nicht so richtig (manchmal hovert der Link, manchmal nicht. Manchmal bleibt das Hover stehen, auch wenn ich mit der Maus schon weg bin...). Für einzelne Bilder oder Links funktioniert das Ganze auch im IE, ich brauche es allerdings gemeinsam (Bild und Text in einem Link).
Kann mir jemand helfen?
Danke schonmal,
Katharina
HTML:
<a class="tbxm_slideshow_next">
<font>weiter</font>
<span/>
</a>
CSS:
.link {
text-decoration: none;
white-space: nowrap;
}
.link font {
font-family: Arial;
font-size: 11px;
margin: 0px;
padding: 0px;
color: black;
text-decoration: underline;
}
.link span {
background: transparent url(bild_.gif) 100% 70% no-repeat;
padding-left: 13px;
width: 8px;
}
.link:hover font {
color: red;
text-decoration: underline;
}
.link:hover span {
background: transparent url(bild_hover.gif) 100% 70% no-repeat;
}