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 …
<!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.