CSS/Selektoren/Pseudoklasse/hover, active, focus
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoklasse
Die Pseudoklassen :hover, :active und :focus sprechen auf unmittelbare Interaktion des Benutzers an. Die Pseudoklassen selektieren Elemente, die
- mit dem Mauszeiger berührt werden (
:hover; englisch to hover: schweben), - den Fokus erhalten, zum Beispiel durch die Tabulatortaste (
:focus) oder - aktuell angeklickt sind (
:active).
Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar. Lediglich der Internetexplorer in der Version 6 kann diese Pseudoklassen nur auf Verweise anwenden. Auch in der Version 7 ist der Support unvollständig.
Beispiel
So sieht's aus
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Beispiel: Link-Pseudoklassen</title>
<style>
body { font: 16px sans-serif; line-height: 2; }
a { padding: 3px; }
a:focus { background-color: red; color: black;}
a:hover { background-color: blue; color: white; }
a:active { background-color: yellow; color: black; }
</style>
</head>
<body>
<ul>
<li><a href="http://de.selfhtml.org">selfhtml</a></li>
<li><a href="http://forum.de.selfhtml.org">selfhtml Forum</a></li>
<li><a href="http://wiki.selfhtml.org">selfhtml wiki</a></li>
</ul>
</body>
</html>
Link-Elemente, die mit der Tabulatortaste ausgewählt werden, erhalten einen roten Hintergrund, werden sie mit dem Mauszeiger berührt, wechselt der Hintergrund zu blau, während die Links angeklickt sind, ist ihre Hintergrundfarbe gelb.
Beachten Sie: Um den zumeist erwünschten Effekt zu erhalten, muss die Reihenfolge dieses Beispiels eingehalten werden. Beispielsweise überschriebe gegebenenfalls ein
:focus zuvor notierte Eigenschaften für :hover, sodass das ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.
