[mcbethy]

Hallo zusammen,
ich brauche mal wieder Hilfe.
Gerade sitze ich an der Umsetzung einer Mini-Seite und mir war danach, alles mit CSS zu realisieren.
Nur dumm, dass ich noch nicht so der Burner bin und an diesem blöden Mouseover-Effekt scheitere.

Link zur Testseite. (Alle Stylesheets sind in diesem Dokument)

Per list-style-image habe ich jedem Punkt ein eigenes Listenbild zugewiesen. Bis dahin kein Problem.
Nun wollte ich jedem auf die gleiche Weise ein Bild für den a:hover Zustand zuweisen. Aber das geht irgendwie nicht.
Ich hatte angenommen, dass es so klappen könnte:

[beeviZ]

du weist in deinem Beispiel ja dem Link das List-style-image zu.

Mit
.liste #aktuell:hover {...}
könnts funktionieren, allerdings Firefox da der IE :hover nur bei Links unterstützt.

Du könntest auch

<li><a href="#" id="aktuell"></a></li>

machen, und dann

li a#aktuell {display:block; height: 100%; background: url(...); padding-left: 30px;}
li a#aktuell:hover {background: url();}

das sollte definitiv funktionieren.

[mcbethy]

Ah, danke für die Hilfe. Ich hab's.
Der Hund lag nur ganz wo anders begraben: Ich musste das a vor hover entfernen. Dann klappt es!

//edit

Verflucht! Ich sollte auch im IE testen, ehe ich in Jubel ausbreche. Es hätte so einfach sein können.
Aber eigentlich hast du es ja selbst geschrieben. Der IE packt es nicht.

[beeviZ]

Machs mit der li a + background: url(); -Methode. Dann gehts.

[mcbethy]

Das funktioniert zwar, aber wie lässt sich der Text ("Aktuell") unten an der Grafik ausrichten?
Mit padding und margin geht es nicht.

[shaly]

wenn du display:block machst, sollte das gehen.

[mcbethy]

Danke shaly.
Es gibt mit dieser Lösung leider extreme Darstellungsunterschiede zwischen den Browsern.
Hoffentlich bekomme ich das auch noch in den Griff. *seufz*

[shaly]

google mal nach dem boxmodel-hack. der ie interpretiert margin und padding anders als vorgesehen.