DevPanicZone Logo DevPanicZone! Cheatsheets.

CSS Navigation States

Active, Hover, Focus und Visited - so gestaltest du interaktive Navigations-Links.

Was sind Navigation States?

Links in einer Navigation haben verschiedene Zustände (States) , die du visuell unterschiedlich gestalten kannst. Das hilft Nutzern zu verstehen, wo sie sind und was sie tun können.

Die vier States

  • Normal - Standardzustand
  • Hover - Maus darüber
  • Focus - Per Tastatur ausgewählt
  • Active/Current - Aktuelle Seite

Bonus-State

  • Visited - Bereits besucht
  • Seltener verwendet in Navigationen
  • Nützlicher bei Link-Listen/Suchergebnissen
CSS-Reihenfolge beachten: LVHFA

Die Reihenfolge der Pseudo-Klassen im CSS ist wichtig!

a:link { }      /* L - Unbesuchter Link */
a:visited { }   /* V - Besuchter Link */
a:hover { }     /* H - Maus darüber */
a:focus { }     /* F - Tastatur-Fokus */
a:active { }    /* A - Wird gerade geklickt */

Active State - Aktuelle Seite markieren

Der Active State zeigt dem Nutzer: "Du bist hier!" . Es gibt zwei Ansätze: Eine CSS-Klasse .active oder das ARIA-Attribut aria-current="page" .

Variante 1: Mit CSS-Klasse

Der klassische Ansatz - du setzt manuell eine Klasse auf den aktuellen Link:

HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/" class="active">Über uns</a></li>
        <li><a href="/contact/">Kontakt</a></li>
    </ul>
</nav>

Variante 2: Mit aria-current (empfohlen)

Besser für Accessibility - Screenreader verstehen das Attribut:

HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/" aria-current="page">Über uns</a></li>
        <li><a href="/contact/">Kontakt</a></li>
    </ul>
</nav>
CSS 
/* Styling mit aria-current */
nav a[aria-current="page"] {
    background: var(--accent-blue);
    color: white;
}

/* Oder kombiniert mit Klasse */
nav a.active,
nav a[aria-current="page"] {
    background: var(--accent-blue);
    color: white;
}

Styling-Varianten für Active State

Verschiedene Möglichkeiten, die aktuelle Seite hervorzuheben:

Background-Farbe

CSS 
nav a.active {
    background: var(--accent-blue);
    color: white;
}

Unterstreichung

CSS 
nav a {
    position: relative;
}

nav a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-blue);
}

Border links (gut für Sidebar-Navs)

CSS 
nav a.active {
    border-left: 3px solid var(--accent-blue);
    padding-left: calc(1rem - 3px);  /* Padding anpassen */
    background: var(--bg-tertiary);
}

Fettschrift + Farbe

CSS 
nav a.active {
    font-weight: 700;
    color: var(--accent-blue);
}
Vorsicht bei font-weight!

Wenn du font-weight änderst, kann sich die Breite des Links ändern und die Navigation "springt". Lösung: Feste Breite oder letter-spacing anpassen.

Hover States - Interaktives Feedback

Hover-Effekte zeigen dem Nutzer: "Das ist klickbar!" . Sie sollten subtil sein, aber deutlich genug, um wahrgenommen zu werden.

Verschiedene Hover-Effekte

Farbwechsel (einfach)

CSS 
nav a {
    color: var(--text);
    transition: color 0.2s ease;
}

nav a:hover {
    color: var(--accent-blue);
}

Background-Wechsel

CSS 
nav a {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

nav a:hover {
    background: var(--bg-tertiary);
    color: var(--accent-blue);
}

Animierte Unterstreichung

CSS 
nav a {
    position: relative;
}

/* Unsichtbare Linie */
nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;           /* Startet in der Mitte */
    width: 0;            /* Unsichtbar */
    height: 2px;
    background: var(--accent-blue);
    transition: all 0.3s ease;
}

/* Bei Hover: Linie wächst */
nav a:hover::after {
    left: 0;             /* Startet links */
    width: 100%;         /* Volle Breite */
}

Scale (Vergrößern)

CSS 
nav a {
    transition: transform 0.2s ease, color 0.2s ease;
}

nav a:hover {
    transform: scale(1.05);
    color: var(--accent-blue);
}

Text-Glow (subtil)

CSS 
nav a {
    transition: all 0.2s ease;
}

nav a:hover {
    color: var(--accent-blue);
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
}
Performance-Tipp

Für flüssige Animationen: Nutze transform und opacity statt width , height oder margin . Diese Properties können von der GPU beschleunigt werden.

Hover auf Touch-Geräten

Auf Touch-Geräten gibt es keine echte Hover-Funktion. Das kann zu Problemen führen, wenn wichtige Informationen nur bei Hover sichtbar werden.

CSS 
/* Hover nur auf Geräten mit Maus/Trackpad */
@media (hover: hover) and (pointer: fine) {
    nav a:hover {
        color: var(--accent-blue);
        background: var(--bg-tertiary);
    }
    
    nav a:hover::after {
        left: 0;
        width: 100%;
    }
}

/* Für Touch-Geräte: Focus als Alternative */
@media (hover: none) {
    nav a:active {
        color: var(--accent-blue);
        background: var(--bg-tertiary);
    }
}
Media Query Erklärung
  • hover: hover - Gerät unterstützt echtes Hovern
  • pointer: fine - Präzises Zeigegerät (Maus, Trackpad)
  • hover: none - Kein echtes Hovern möglich (Touch)
  • pointer: coarse - Unpräzises Zeigegerät (Finger)

Focus States - Tastatur-Navigation

Focus-Styles zeigen Tastatur-Nutzern, welches Element gerade ausgewählt ist. Sie müssen deutlich sichtbar sein - das ist keine Option, sondern Pflicht für Accessibility!

Verschiedene Focus-Styles

Demo: Tabbe Tab ⇥ durch die Links, um den Focus zu sehen:

Outline (Standard, verbessert)

CSS 
nav a:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;  /* Abstand zum Element */
}

Box-Shadow (folgt dem border-radius)

Tipp: outline ignoriert border-radius und bleibt eckig. box-shadow passt sich der Form an.

CSS 
nav a:focus {
    outline: none;  /* Nur OK wenn Ersatz vorhanden! */
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.4);
}

Kombination (Outline + Background)

CSS 
nav a:focus {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
    background: var(--bg-tertiary);
}

:focus vs :focus-visible

Mit :focus-visible zeigst du den Focus-Ring nur bei Tastatur-Navigation, nicht bei Mausklicks:

CSS 
/* Focus nur bei Tastatur-Navigation */
nav a:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Fallback für ältere Browser */
nav a:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Moderner Ansatz: Entferne bei Maus, behalte bei Tastatur */
nav a:focus:not(:focus-visible) {
    outline: none;
}

Der :visited -State zeigt an, welche Links bereits besucht wurden. In Navigationen ist das selten sinnvoll , aber bei Link-Listen oder Suchergebnissen sehr hilfreich.

CSS 
/* Besuchte Links ausgrauen */
a:visited {
    color: var(--text-muted);
}

/* Mit Häkchen-Indikator */
a:visited::before {
    content: '✓ ';
    color: var(--accent-green);
}
Sicherheits-Einschränkungen

Aus Datenschutzgründen sind :visited -Styles stark eingeschränkt. Du kannst nur diese Properties ändern:

  • color
  • background-color
  • border-color
  • outline-color

Keine content , background-image oder andere Properties - das würde erlauben, die Browsing-History auszulesen!

Wann :visited verwenden?

:visited verwenden
  • Suchergebnisse
  • Blog-Artikel-Listen
  • Dokumentations-Inhaltsverzeichnisse
:visited nicht verwenden
  • Hauptnavigation (verwirrend)
  • Footer-Links

Alles zusammen: Komplettes Beispiel

So sieht eine Navigation aus, die alle States kombiniert:

Demo: Hover, Focus (Tab) und Active kombiniert

CSS 
/* Basis-Styles */
nav a {
    position: relative;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Animierte Unterstreichung vorbereiten */
nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-blue);
    transition: all 0.3s ease;
}

/* Hover */
nav a:hover {
    color: var(--accent-blue);
    background: var(--bg-tertiary);
}

nav a:hover::after {
    left: 0;
    width: 100%;
}

/* Focus (Tastatur) */
nav a:focus {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* Active (aktuelle Seite) */
nav a.active,
nav a[aria-current="page"] {
    color: white;
    background: var(--accent-blue);
}

/* Keine Unterstreichung bei aktiver Seite */
nav a.active::after,
nav a[aria-current="page"]::after {
    display: none;
}

Zusammenfassung

State Wann? Typisches Styling
:hover Maus über Element Farbwechsel, Background, Underline
:focus Tastatur-Auswahl Outline, Box-Shadow (sichtbar!)
.active Aktuelle Seite Hervorhebung (Background, Bold, Border)
:visited Bereits besucht Ausgegraute Farbe (nur bei Link-Listen)
Best Practices
  • Immer transition für sanfte Übergänge
  • Focus-Style nie entfernen, nur ersetzen
  • aria-current="page" für Accessibility
  • Hover und Focus ähnlich stylen (beide = "ausgewählt")
  • Active State deutlich anders als Hover
  • Nicht zu viele verschiedene Effekte kombinieren

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.

Editor öffnen

Mehr aus CSS

Tutorials werden geladen...