Hallo, bevor ich das Problem schildere, erstmal der Link dazu:
http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Es geht um die Linkliste auf der linken Seite, beginnend mit "TRADITIONELLES UND ORIGINELLES". Ich möchte erreichen, dass bei einem Mouseover sich nicht nur die Farbe der Links ändert (von dunkelgrau zu hellgrau), sondern dass sich auch das Bild (das Ornament unter dem jeweiligen Link) ändert (auch wieder von dunkelgrau zu hellgrau).

Mein erster Versuch: Bildwechsel per CSS. Dazu habe ich ein Hintgrundbild für <li> definiert:

ul#speisenavi li {  
  	display: block;  
	padding: 1.6em;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi2.gif); /*hellgraues Ornament*/  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }

Dieses Hintergrundbild ist also zu sehen, wenn <li> keinen Link, sondern nur Text enthält.

Dann habe ich für den Link folgendes definiert:

ul#speisenavi a small {  
	color:#666666;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi.gif); /*dunkelgraues Ornament, liegt über dem hellgrauen Ornament, was für <li> definiert wurde*/  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }

Schließlich der Bildwechsel bei Mouseover:

ul#speisenavi a:focus small, ul#speisenavi a:hover small, ul#speisenavi a:active small {  
	color: #999999;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi2.gif); /*hellgraues Ornament*/  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }

Problem: Das hellgraue Ornament, dass ich für <li> als Hintergrundbild angegeben habe, wird nicht komplett von dem dunkelgrauen Ornament verdeckt. Das sieht man, wenn man z.B. auf "EIN STÜCK VIELFALT" klickt. Auf der folgenden Seite sieht man beim Ornament oberhalb von "EIN STÜCK VIELFALT", dass die untere Spitze des hellgrauen Ornaments unterhalb des dunklen zu sehen ist.

Außerdem sieht man bei genauem Hinschauen, dass die Ornamente ein oder zwei Pixel beim Mouseover "springen".

Toll wäre es, wenn ich das hellgraue Element, dass ich für <li> definiert habe, beim Mouseover ausblenden könnte. Geht das irgendwie mit visibility=none?

Oder muss ich es ganz anders machen? Zum Beispiel die zunächst sichtbare Grafik (das dunkelgraue Ornament) als <img> in den Link setzen und die erst später sichtbare Grafik (das hellgraue Ornament) als Hintergrundgrafik für <a> einbinden? Habe ich auch probiert, aber das ergab totales Chaos. Muss aber nicht heißen, dass dieser Weg deswegen falsch ist.

Ihr würdet mir sehr helfen, wenn ihr mir erstmal mitteilt, welcher der richtige Weg ist. Dann probiere ich weiter.

Ich habe auf FF 3.5.2 getestet.