Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

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. Allerdings ist es nicht sinnvoll, Text beim Überfahren mit der Maus anders zu formatieren.

  • 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.
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