CSS/Selektoren/Pseudoklasse/hover, active, focus

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • CSS 2.1
  • IE 8
  • Firefox
  • Chrome
  • Safari
  • Opera
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.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Selektoren/Pseudoklasse/hover,_active,_focus&oldid=58285“