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 (
:focus) erhalten, zum Beispiel durch die Tabulatortaste (↹ ) oder - aktuell angeklickt sind (
:active).
Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar.
Beispiel
ansehen …
<!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 ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.Beachten Sie: Auf Mobilgeräten ist wegen der fehlenden Maus die Verwendung der Pseudoklasse
:hover problematisch. Beispielsweise kann dies zur Nichtbedienbarkeit einer Navigation führen, falls Unterpunkte per :hover ausgeklappt werden sollen.
