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

Mehr aus CSS

Tutorials werden geladen...