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. Allerdings ist es nicht sinnvoll, Text beim Überfahren mit der Maus anders zu formatieren.
Beispiel
ansehen …
a { padding: .2em; }
a:focus { background-color: red; color: black;}
a:hover { background-color: blue; color: white; }
a:active { background-color: yellow; color: black; }
<ul>
<li><a href="https://selfhtml.org">selfhtml</a></li>
<li><a href="https://forum.selfhtml.org">selfhtml Forum</a></li>
<li><a href="https://wiki.selfhtml.org">selfhtml Wiki</a></li>
</ul>
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.Siehe auch[Bearbeiten]
- a:link: In manchen Stylesheets findet man auch die Auszeichnung a:link. Sie selektiert alle a-Elemente, die auch einen Link darstellen, also eigentlich alle.
- :focus-within: selektiert Elemente, deren Kindelemente den Fokus erhalten