Ausführbare CSS-Docs: CSS Hover

Q: Wie füge ich in CSS einen Hover-Effekt hinzu?

Schreib eine Regel mit :hover hinter dem Selektor: .btn:hover { background: #1d4ed8; }. Die Deklarationen gelten, solange der Mauszeiger über dem Element ist. Füge der normalen Regel transition: background 0.2s; hinzu, um den Wechsel zu animieren.

Q: Was ist der Unterschied zwischen :hover und :active?

:hover gilt, solange der Mauszeiger über dem Element ist. :active gilt, während es gedrückt wird, vom Drücken der Maustaste bis zum Loslassen. Ein gedrückter Button ist meist gleichzeitig hover und active.

Q: In welcher Reihenfolge stehen die Link-Pseudoklassen?

:link, :visited, :hover, :active (Merkhilfe LVHA, auf Englisch "LoVe HAte"). Sie haben dieselbe Spezifität, also gewinnt die spätere Regel; in jeder anderen Reihenfolge kann ein visited- oder hover-Stil den hover- oder active-Stil verdecken.

Q: Wie ändere ich die Linkfarbe in CSS?

Style das Element a: a { color: #2563eb; }, dann a:visited { color: #7c3aed; } und a:hover { color: #1d4ed8; } für die anderen Zustände. color an a deckt besuchte und unbesuchte Links ab.

So funktioniert :hover

:hover ist eine Pseudoklasse, die ein Element trifft, solange der Mauszeiger darüber ist. Häng sie an einen beliebigen Selektor und schreib die Styles für den Hover-Zustand:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Nur die Deklarationen in der :hover-Regel ändern sich; alles andere wird von .btn übernommen. Verlässt der Zeiger das Element, kehrt es zu seinen normalen Styles zurück.

Weiche Hover-Effekte mit transition

Ein Hover-Wechsel passiert sofort, außer du fügst transition zur normalen Regel hinzu (nicht zur :hover-Regel), damit er hin und zurück animiert wird:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform und opacity sind die günstigsten Eigenschaften zum Animieren; sie verschieben die umliegenden Elemente nicht. Wer width, height oder margin animiert, zwingt die Seite in jedem Frame zu einem neuen Layout. Dauer, Verzögerung und Easing-Kurven stehen auf der Seite zu CSS transition.

Linkfarben: :link, :visited, :hover, :active

Links haben vier klassische Zustände plus den Tastaturfokus, und die Reihenfolge der Regeln ist wichtig:

Pseudoklasse	Gilt, wenn
`:link`	Der Link noch nicht besucht wurde
`:visited`	Die URL im Browserverlauf steht
`:hover`	Der Zeiger darüber ist
`:active`	Er gerade gedrückt wird
`:focus-visible`	Er den Tastaturfokus hat

Alle haben dieselbe Spezifität, also gewinnt die spätere Regel, wenn zwei passen. Ein besuchter Link, über dem der Zeiger ist, passt auf :visited und :hover; steht :visited zuletzt, erscheint die Hover-Farbe nie. Die sichere Reihenfolge ist Link, Visited, Hover, Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Browser begrenzen, was :visited ändern darf, damit Seiten deinen Verlauf nicht auslesen können. Nur farbbezogene Eigenschaften (color, background-color, border-color, outline-color und ein paar weitere) wirken, und Skripte sehen immer den unbesuchten Wert.

:active: der gedrückte Zustand

:active trifft, während das Element gedrückt wird. Eine kleine Bewegung lässt einen Button greifbar wirken:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Hover am Elternelement, um ein Kind zu stylen

Der Hover-Zustand gehört dem Element unter dem Zeiger und jedem seiner Vorfahren. Deshalb stylt .card:hover .title den Titel, sobald irgendein Teil der Karte gehovert wird, und nach demselben Prinzip tauchen versteckte Elemente auf:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

Die Zeile mit :focus-within ist wichtig: Ohne sie würde jemand, der per Tab-Taste zum Löschen-Button springt, einen unsichtbaren Button drücken. Kombiniere jedes Einblenden per Hover mit einer Fokus-Regel.

Hover auf Touchscreens

Handys und Tablets haben keinen Zeiger, der über einem Element verweilt. Die meisten mobilen Browser wenden :hover beim ersten Tippen an und behalten es, bis du woanders hintippst, sodass ein Hover-Stil hängen bleiben kann. Zwei Regeln halten das im Griff:

Mach :hover nie zum einzigen Weg zu einem Inhalt. Ein Menü, das sich beim Hovern öffnet, muss sich auch per Klick öffnen.
Pack rein dekorative Hover-Effekte in eine Media Query, die auf ein echtes Hover-Gerät prüft:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Häufige Fehler

Ein Leerzeichen vor dem Doppelpunkt. .btn :hover bedeutet „ein gehovertes Element innerhalb von .btn“. Schreib .btn:hover.
transition nur in der :hover-Regel. Dann wird die Änderung beim Hineinfahren animiert, springt beim Verlassen aber zurück. Setz es in die normale Regel.
Falsche Link-Reihenfolge. Halte :link, :visited, :hover, :active in dieser Reihenfolge.
Hover ohne Fokusstil. Tastaturnutzer lösen :hover nie aus; gib interaktiven Elementen auch einen :focus-visible-Stil.
Hover auf einem Element, das ein anderes überdeckt. Eine unsichtbare Ebene (oft ein absolut positioniertes Pseudoelement) kann den Zeiger abfangen. pointer-events: none auf dieser Ebene behebt das.

Häufig gestellte Fragen

Wie füge ich in CSS einen Hover-Effekt hinzu?

Schreib eine Regel mit :hover hinter dem Selektor: .btn:hover { background: #1d4ed8; }. Die Deklarationen gelten, solange der Mauszeiger über dem Element ist. Füge der normalen Regel transition: background 0.2s; hinzu, um den Wechsel zu animieren.

Was ist der Unterschied zwischen :hover und :active?

:hover gilt, solange der Mauszeiger über dem Element ist. :active gilt, während es gedrückt wird, vom Drücken der Maustaste bis zum Loslassen. Ein gedrückter Button ist meist gleichzeitig hover und active.

In welcher Reihenfolge stehen die Link-Pseudoklassen?

:link, :visited, :hover, :active (Merkhilfe LVHA, auf Englisch "LoVe HAte"). Sie haben dieselbe Spezifität, also gewinnt die spätere Regel; in jeder anderen Reihenfolge kann ein visited- oder hover-Stil den hover- oder active-Stil verdecken.

Wie ändere ich die Linkfarbe in CSS?

Style das Element a: a { color: #2563eb; }, dann a:visited { color: #7c3aed; } und a:hover { color: #1d4ed8; } für die anderen Zustände. color an a deckt besuchte und unbesuchte Links ab.

Funktioniert Hover auf dem Handy?

Touchscreens haben keinen Zeiger, der über einem Element verweilen kann. Die meisten mobilen Browser wenden :hover beim Tippen an und behalten es, bis du woanders hintippst, sodass ein Hover-Stil hängen bleiben kann. Pack reine Hover-Effekte in @media (hover: hover) und versteck nie wichtige Inhalte hinter Hover.

Verwandte Konzepte