Dynamische Pseudo-Klassen: `:hover`

Beispiel

Die dynamische Pseudo-Klasse :hover erzeugt einen Mouseover-Effekt, indem sie das Aussehen von Elementen bestimmt, während der Mauszeiger über sie fährt. Genauer gesagt muss der Mauszeiger über den rechteckigen Bereich (der Box), den jedes Element auf einer Seite einnimmt, bewegt werden.
Normaler Weise wird :hover für Hyperlinks eingesetzt, laut der W3C-Spezifikation ist diese Eigenschaft aber für alle Elemente zugelassen und so kannst du Mouseover-Effekte z.B. auch für Formularfelder, Tabellenzellen und <div>-Container definieren. Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags.

<style type="text/css">
 a:link{color:#000;}
 a:visited{color:#ff0;}
 a:hover{color:#f00;}
 a:active{color:#f00;}
</style>
</head>

<body>
    <a href="datei1.htm">Link</a>
</body>

Anwendbar auf:	Alle Elemente
Werte:	Alle Stylesheet-Angaben
Bemerkung:	Es sind alle Stylesheet-Angaben erlaubt. Denke daran :active und :hover wie oben dargestellt nach :link und :visited zu definieren, da sie sonst die Eigenschaften von :visited übernehmen und die eigene Definition ignorieren. Dies ist kein Browser-Bug, sondern eine Festlegung in CSS. Weitere Infos findest Du hier: Pseudoformate für Hyperlinks und Unterschiedliche Pseudoformate für Hyperlinks