CSS: Rollover-Effekt (einfarbig)

Auf vielen Webseiten sieht man den sogenannten „Rollover-Effekt“. Dabei fährt man z.B. über ein Feld in der Navigation, woraufhin sich das Hintergrundbild ändert. Auf vielen Webseiten ist dieser Effekt mit Javascript realisiert. CSS hat in diesem Punkt allerdings einige Vorteile

Viele Benutzer haben JavaScript in ihrem Browser ausgeschaltet.
Fast alle Benutzer haben CSS-Unterstützung in ihrem Browser.
CSS ist schneller und einfacher zu verstehen.

Als Beispiel hier eine einfache Navigation:

<div id=„navigation„>
<ul>
<li><a href=„#„>Startseite</a></li>
<li><a href=„#„>Irgendeine Seite</a></li>
<li><a href=„#„>Noch eine Seite</a></li>
</ul>
</div>

Das # muss dabei natürlich durch den entsprechenden Verweis (URL) ersetzt werden.

In den Header der Seite (also zwischen <head> und </head>) muss folgender CSS-Code:

<style type=„text/css„></style>

Das Ergebnis sieht dann so aus:

Natürlich können die Farben entsprechend angepasst werden. (Siehe hier)