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 erhalten, zum Beispiel durch die Tabulatortaste (:focus) 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.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML