CSS/Selektoren/Pseudoklasse/hover, active, focus

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.

ansehen …

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

• 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

Weblinks

• deque: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
• css-tricks: Focusing on Focus Styles