Hover-Links

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/974237546.shtml

Auf vielen Websites sieht man diesen Effekt: man geht mit der Maus über einen Link, der dann z.B. die Farbe verändert - allerdings nur, wenn man einen IE oder NN 6 verwendet. Wie geht das eigentlich?

CSS-Grundlagen

Erst einmal sollte ein Stylesheet für "normale" Links definiert werden:

A { color : #0000FF; text-decoration: none }

Und dann ein Stylesheet für den Hover-Effekt:

a:hover {color: #FF00FF;}

CSS, die Zweite

Das obige Beispiel berücksichtigt keine Link-Unterklassen. So funktioniert's:

.special { color : #FF0000; text-decoration: none }
.special:hover {color: #FFFF00;}

Trend-Stylesheets

Einige Beispiele für trendige Hover-Stylesheets:

Farbänderung:
a:hover {color: #FF00FF;}

Fett werdende Links:
a:hover {font-weight: bold;}

Normale Unterstreichung:
a:hover {text-decoration: underline;}

Unter- und Oberstreichung:
a:hover {text-decoration: underline;}
a:hover {text-decoration: overline;}