nicht angemeldet
hover als mouseover-Ersatz
Hallo,
ich versuche hover im CSS als Ersatz für JS-mouserover einzusetzen.
Problem ist hierbei, dass FF und IE das mal wieder unterschiedlich interpretieren:
http://deynews.cjb.cc/test/test.html
Es geht um die Navigation über die Bilder.
#navi_link1, #navi_link1 a{
background-image:url(img_navi/menubar_produkte.jpg);
}
#navi_link1:hover, #navi_link1 a:hover {
background-image:url(img_navi/menubar_produkte_a.jpg)
#navi_link3 {
background-image:url(img_navi/menubar_ueberfuji.jpg)
}
#navi_link3:hover {
background-image:url(img_navi/menubar_ueberfuji_a.jpg)
<ul id="navlist">
<li id="navi_link1"><a href="test.html" title="link1_t"><img src="img_navi/space2x2.gif"><span>Produkte</span></a></li>
<li id="navi_link2"><a href="test2.html" title="link2_t"><img src="img_navi/space2x2.gif"><span>News</span></a></li>
<li id="navi_link3"><a href="test3.html" title="link1_t"><img src="img_navi/space2x2.gif"><span>Fuji</span></a></li>
<li id="navi_link4"><a href="test.html" title="link1_t"><img src="img_navi/space2x2.gif"><span>Service</span></a></li>
</ul>
FF versteht den hover sehr gut für img (siehe Link News im Beispiel).
IE versteht den hover sehr gut für a (siehe Link Produkte im Beispiel).
Im moment scheint nur entweder oder zu gehen. Beides gelingt mir nicht.
Um der Frage zuvorzukommen, Warum?
Ich werde 50 - 70 Seiten zu administrieren haben und meine Navigation wird entsprechend oft als HTML exisieren.
Darüberhinaus sind anstatt Text-links Bild-links gewünscht.
Um meine Navigation via seitenübergreifendem Copy'n Paste durchführen zu können soll meine Navigation kurz und immer gleich.
Anpassung könnte ich dann im CSS durchführen.
Kann jemand helfen?
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger --
-- noch immer ein erfolgloser <DIV> Jünger --
-
hi,
FF versteht den hover sehr gut für img (siehe Link News im Beispiel).
IE versteht den hover sehr gut für a (siehe Link Produkte im Beispiel).FF und IE verstehen den nachfahrenselektor.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
FF und IE verstehen den nachfahrenselektor.
gruß,
wahsagaich verstehe zwar deine Antwort nicht, bin mir aber dennoch sicher, dass sie nicht hilft:
- den Nachfahrenselektor benutze ich doch?! #navi_link1:hover, #navi_link1 a:hover
- IE kann die Fläche des img nicht für den hover-Effekt nutzen
- wenn ich nun a ein backgroung-image zuweise zerstört mir das meine Anzeige im FF (hover funktioniert), ein bis 2 halbe Hintergrundbilder
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger ---
hi,
- IE kann die Fläche des img nicht für den hover-Effekt nutzen
aber die eines bildes innerhalb eines links.
- wenn ich nun a ein backgroung-image zuweise zerstört mir das meine Anzeige im FF (hover funktioniert), ein bis 2 halbe Hintergrundbilder
dann hast du den link vermutlich nicht ausreichend groß gemacht.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
dann hast du den link vermutlich nicht ausreichend groß gemacht.
daran könnte es wohl liegen
- habe mal eine border um a gelegt und der ist im FF ca. halb so gross wie in IE
- ich hatte eigentlich schon alle height auf deutlich grössere Werte als die benötigen 25px gesetzt, das Hintergrundbild bleibt immer halbiert
- sobald ich a das Hintergrundbild wegnehme ist das Hintergrundbild des img in FF voll zusehen und das hover funktioniert im FF
- im IE sehe ich dann aber nur das Hintergrundbild des img ohne jegl. hover-Effekt
Wie gesagt es funktioniert ja für jeden Browser einzeln. Nur nicht gleichzeitig.
Ich sehe nicht woran es liegt!bydey
--
-- noch immer ein erfolgloser <DIV> Jünger ---
hi,
- ich hatte eigentlich schon alle height auf deutlich grössere Werte als die benötigen 25px gesetzt
hast du denn auch dafür sorge getragen, dass height angewandt werden darf?
a ist ein (non-replaced) inline element, und solche können keinen height-formatierung erhalten. da müsstest du also zumindest dafür sorgen, dass es nicht mehr als inline dargestellt wird ...gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo und danke,
a ist ein (non-replaced) inline element, und solche können keinen height-formatierung erhalten. da müsstest du also zumindest dafür sorgen, dass es nicht mehr als inline dargestellt wird ...
Hast dir aber echt Teit gelassen mit dem richtigen Hinweis.
Herzlichen Dank.bydey
--
-- noch immer ein erfolgloser <DIV> Jünger --
-