Hover klappt nicht

[Matthias Apsel]

Om nah hoo pez nyeetz, Retty!

Die nächsten Schritte

• Bild und Text verschwinden lassen bei hover
• Text bei Hover ersetzen
• Bild und Text bei Hover ersetzen

Grundsätzlich ist step by step eine gute Variante. Hier könnte das vielleicht kontraproduktiv sein. Ich stelle dir eine HTML4.01-Variante vor. Unter Verwendung von HTML5-Elementen könnte das etwas einfacher sein. Ich gehe davon dass sowohl Bild als auch Text auf :hover reagieren sollen. Das Austauschen von Grafiken ist mit CSS eigentlich nicht so richtig möglich. Deshalb verwende ich ein Hintergrundbild. Meist möchte man bei Navigationslisten ein anderes Bild haben.

<div id="mein_div"><span></span></div> könnte die Struktur sein.

#mein_div {background-image url(ungehovertes Bild');} #mein_div span:after {content: 'ungehoverter Text';}

#mein_div:hover {background-image url(gehovertes Bild');} #mein_div:hover span:after {content: 'gehoverter Text';}

Vielleicht gibt es auch passendere Elemente. Zum Beispiel:

<ul id="nav">   <li><a href..></a></li> </ul>

#nav li {background-image url(ungehovertes Bild');} #nav li a:after {content: 'ungehoverter Text';}

#nav li:hover {background-image url(gehovertes Bild');} #nav li:hover a:after {content: 'gehoverter Text';}

wäre zumindest eine Möglichkeit. Schau dich zu den verwendeten Sachen im Wiki um.

• Selektoren
• generierter Inhalt

Matthias