hover als mouseover-Ersatz

[dey]

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

[wahsaga]

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

[dey]

Hallo wahsaga,

FF und IE verstehen den nachfahrenselektor.

gruß,
wahsaga

ich 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

[wahsaga]

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

[dey]

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

[wahsaga]

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

[dey]

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