nicht angemeldet
Hover bei Bild und Link gleichzeitig
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;
}
-
Hallo,
Kann mir jemand helfen?
Vielleicht wenn du das HTML-Beispiel so (vollständig) postest, daß es zu deinem geposteten CSS paßt.
bydey
--
-- bydey ist die Signatur und Verabschiedung, nicht der Nick --
-- Navigate all your PHP web projects with PHP Project Browser---
Hi,
sorry, hab ich übersehen. Hier die korrekte Version:
HTML:
<a class="link">
<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;
}Kann mir jemand helfen?
Vielleicht wenn du das HTML-Beispiel so (vollständig) postest, daß es zu deinem geposteten CSS paßt.bydey
-
hi,
HTML:
<a class="link">
<font>weiter</font>
<span/>
</a>Das ist nicht "vollständig".
Und das <font> im A sowie die darauf bezogenen Selektoren
.link font {
.link:hover font {sind unsinnig.
Du kannst den Text im Link direkt formatieren, dafür brauchst du das missbilligte Element Font nicht.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi
<font>weiter</font>
font ist deprecated und hier sogar flüssiger als flüssig - überflüssig
<span/>
Aus SELFHTML:
Wenn Sie Elemente, die Inhalt haben können, ohne Inhalt verwenden, z.B. <p></p>, dann notieren Sie sie in XHTML jedoch besser in dieser Form und nicht in der Form <p />. Denn die verbreiteten HTML-Parser behandeln <p /> wie <p>..link {
text-decoration: none;
}
.link font {
text-decoration: underline;
}Erst nicht unterstreichen, dann doch? Lass das Font weg, dann brauchst du auch die beiden text-decoration: nicht
.link:hover font {
color: red;
text-decoration: underline;
}auch hier entfällt das font und die text-decoration
mfg
Genie
-
-