:hover, :focus, :active und :visited
Formatieren Sie interaktive Zustände von Links und Schaltflächen mit den gängigsten CSS-Pseudoklassen.
:hover, :focus, :active und :visited ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Pseudoklassen?
Pseudoklassen wählen Elemente anhand ihres Zustands oder ihrer Beziehung zu anderen Elementen aus. Sie beginnen mit einem einzelnen Doppelpunkt : und erfordern keine zusätzlichen Attribute im HTML.
:hover
:hover wird angewendet, wenn sich der Zeiger der Benutzerin oder des Benutzers über einem Element befindet. Dies ist der am häufigsten verwendete Selektor für interaktive Zustände.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus wird angewendet, wenn ein Element den Fokus erhält (über die Tabulatortaste oder programmgesteuert). Das ist für die Barrierefreiheit entscheidend.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible ist eine intelligentere Variante von :focus – der Fokusring wird nur angezeigt, wenn der Fokus über die Tastatur und nicht über die Maus erhalten wurde. So erhalten Tastaturbenutzerinnen und -benutzer Fokusanzeigen, ohne dass sie beim Klicken mit der Maus erscheinen.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within wird auf ein Element angewendet, wenn eines seiner untergeordneten Elemente den Fokus hat. Das ist nützlich, um Formularcontainer oder Suchleisten zu gestalten, sobald sie aktiv sind.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active wird angewendet, während ein Element aktiviert wird – etwa während eines Mausklicks oder einer Berührung. Dadurch erhalten interaktive Elemente eine visuelle Rückmeldung.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited gestaltet Links, die die Benutzerin oder der Benutzer bereits besucht hat. Aus Datenschutzgründen kann nur eine begrenzte Anzahl von Eigenschaften mit :visited gestaltet werden (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Reihenfolge der Linkzustände (LVHA)
Wenn Sie alle vier Linkzustände gestalten, halten Sie die LVHA-Reihenfolge ein, um Probleme mit der Spezifität zu vermeiden: Link, Visited, Hover, Active.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover auf Touchgeräten
Touchscreens haben nicht auf dieselbe Weise wie Mäuse einen Hover-Zustand. :hover kann beim Tippen kurzzeitig aktiviert werden. Verwenden Sie für Touch-spezifische Interaktionen :active oder die Media Query @media (hover: none).
Zustände kombinieren
Pseudoklassen können verkettet werden, um mehrere Zustände gleichzeitig zu gestalten:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Hover-Zustände animieren
Erstellen Sie fließende Hover-Effekte mit Transition-Definitionen im Grundzustand (nicht im :hover-Zustand), damit die Transition in beide Richtungen abgespielt wird:
<button class="btn demo-hover">Hover transitions smoothly</button>
Kurzer Wissenstest
Welche Pseudoklasse zeigt Fokusstile nur bei der Tastaturnavigation und nicht bei Mausklicks an?
Zusammenfassung
:hover wird aktiviert, wenn sich der Zeiger über einem Element befindet; :focus bei erhaltenem Eingabefokus; :active während eines Klicks; :visited für besuchte Links. Verwenden Sie :focus-visible für Fokusringe, die nur bei Tastaturnavigation erscheinen. Halten Sie bei Linkzuständen die LVHA-Reihenfolge ein. Sorgen Sie aus Gründen der Barrierefreiheit immer für sichtbare Fokusanzeigen.
Häufig gestellte Fragen
Ist die Lektion „:hover, :focus, :active und :visited“ kostenlos?
Ja — der vollständige Text von „:hover, :focus, :active und :visited“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „:hover, :focus, :active und :visited“?
Formatieren Sie interaktive Zustände von Links und Schaltflächen mit den gängigsten CSS-Pseudoklassen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „:hover, :focus, :active und :visited“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- :hover, :focus, :active und :visited
- :nth-child und :nth-of-type
- :not(), :is() und :where()
- :checked, :disabled und Formularzustands-Pseudoklassen