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