CSS :hover Pseudo-Klasse – Syntax, Beispiele & Tipps

Die :hover-Pseudo-Klasse trifft auf ein Element zu, während sich der Zeiger des Benutzers darüber befindet. Sie wird aktiv, sobald der Zeiger das Element betritt, und deaktiviert sich in dem Moment, in dem der Zeiger das Element verlässt — ohne Klick erforderlich.

Diese Seite behandelt:

Grundlegende Syntax und wie man Links, Buttons und beliebige Elemente anspricht
Kombination von :hover mit transition für sanfte Animationseffekte
Hovern über ein Elternelement, um seine Kindelemente anzuzeigen oder neu zu gestalten (Dropdown-Muster)
Absicherung von Hover-Stilen mit @media (hover: hover) für Touch-Geräte
Anforderungen an die Barrierefreiheit und die Kombination mit :focus / :focus-within

Syntax

selector:hover {
  /* declarations applied while pointer is over the element */
}

Der Selektor kann ein beliebiger gültiger CSS-Selektor sein — Element, Klasse, ID oder eine Kombinator-Kette.

Links beim Hovern gestalten

Die häufigste Verwendung von :hover ist das Ändern des Aussehens von Anker-Links. Für vorhersehbares Link-Styling sollte man Regeln in der LVHA-Reihenfolge deklarieren: :link, :visited, :hover, :active. Diese Reihenfolge stellt sicher, dass spätere Pseudo-Klassen frühere ohne Spezifitätsüberraschungen überschreiben können.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:hover {
        background-color: #8ebf42;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Probier es selbst »

Bewege den Zeiger über den Link, um die Änderung von Hintergrund- und Textfarbe zu sehen.

Hover bei Inline-Textlinks

Wenn ein Link innerhalb eines Absatzes erscheint, trifft :hover dennoch nur auf dieses <a>-Element zu — der umgebende Text bleibt unberührt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
      a:hover {
        background-color: #555;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>

Probier es selbst »

Blockelemente beim Hovern

:hover funktioniert mit jedem Element, nicht nur mit Links. Das Anwenden auf ein <div> ermöglicht interaktive Karten- oder Panel-Effekte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
      div:hover {
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>

Probier es selbst »

Sanfte Hover-Effekte mit transition

Eine einfache :hover-Regel wechselt Stile sofort. Das Hinzufügen einer transition beim Basis-Selektor (nicht der :hover-Regel) lässt den Browser die Änderung in beide Richtungen animieren — wenn der Zeiger eintritt und wenn er das Element verlässt.

.button {
  background-color: #1c87c9;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Place transition on the base rule, not :hover */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
  background-color: #145e8a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Wenn man transition nur innerhalb der :hover-Regel platziert, wird die Animation beim Betreten abgespielt, springt aber beim Verlassen sofort zurück — ein häufiger Anfängerfehler.

Man kann mehrere Eigenschaften durch Kommas trennen oder transition: all 0.25s ease als Kurzschreibweise verwenden (obwohl das Ansprechen spezifischer Eigenschaften für die Performance besser ist).

Elternelement hovern, um Kindelemente zu gestalten

:hover kann Teil eines Kombinator-Selektors sein, um auf den Hover-Zustand eines Elternelements zu reagieren und ein untergeordnetes Element zu gestalten. Dies ist die Grundlage von Dropdown-Navigationsmenüs und Reveal-on-Hover-Effekten.

/* Card image starts dimmed; brightens when the card is hovered */
.card .card-image {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.card:hover .card-image {
  opacity: 1;
}

/* Reveal an overlay label on hover */
.card .card-label {
  display: none;
}

.card:hover .card-label {
  display: block;
}

.nav-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.nav-item:hover .dropdown {
  display: block;
}

Warnung

Reine Hover-Menüs sind für Tastatur- und Touch-Benutzer nicht zugänglich. Kombiniere :hover mit :focus-within, damit das Menü auch geöffnet wird, wenn ein Kindelement per Tastaturnavigation den Fokus erhält:

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

Hover-Stile für Touch-Geräte absichern

Viele Touchscreen-Geräte lösen beim Tippen einen simulierten Hover aus, der Stile „feststecken" lassen kann, bis der Benutzer woanders tippt. Um dies zu verhindern, sollte man hover-spezifische Regeln in eine Media Query einbetten, die prüft, ob das primäre Eingabegerät echtes Hovern unterstützt:

/* Only apply on devices with a real pointer (mouse, trackpad) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

Das hover: hover Media-Feature wird in modernen Browsern weitgehend unterstützt. Auf reinen Touch-Geräten wird der Block einfach ignoriert, sodass die Basis-Stile sauber bleiben.

Man kann es auch mit pointer: fine kombinieren, um präzise Zeigegeräte (Maus/Trackpad) anzusprechen und grobe (Touch) auszuschließen:

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #145e8a;
  }
}

Barrierefreiheit: :hover mit :focus kombinieren

Tastaturbenutzer navigieren mit der Tab-Taste, wodurch :focus anstelle von :hover ausgelöst wird. Wenn Hover-Stile wichtiges visuelles Feedback vermitteln (wie das Hervorheben des aktiven Navigationselements), sollte man dieselben Stile auf :focus anwenden, damit Tastaturbenutzer gleichwertiges Feedback erhalten:

/* Always pair hover and focus for interactive elements */
a:hover,
a:focus {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
  text-decoration: underline;
}

Bei zusammengesetzten Komponenten (wie einer Karte mit einem Button) ermöglicht :focus-within das Gestalten des Elternelements, wann immer ein Kindelement den Fokus hat:

.card:hover,
.card:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Info

Viele Touch-Geräte lösen keinen dauerhaften :hover-Zustand aus; das Tippen auf ein Element löst stattdessen typischerweise :active oder :focus aus. Teste interaktive Hover-Muster immer auf einem echten Touch-Gerät oder mit Touch-Emulation.

Hover-Effekte bei anderen Eigenschaften

:hover ist nicht auf Farben beschränkt. Jede animierbare CSS-Eigenschaft kann beim Hovern umgeschaltet oder in einen Übergang versetzt werden:

Eigenschaft	Typischer Hover-Effekt
`opacity`	Overlays oder sekundäre UI ein-/ausblenden
`transform`	Element skalieren, verschieben oder drehen
`box-shadow`	Karten und Buttons Tiefe verleihen
`color`	Text- oder Symbolfarbe ändern
`cursor`	Anzeigen, dass ein Element interaktiv ist

Best Practices

:hover mit :focus spiegeln, damit Tastaturbenutzer dasselbe visuelle Feedback erhalten: a:hover, a:focus { ... }.
Hover-only-Animationen hinter @media (hover: hover) absichern, um feststeckende Zustände auf Touch-Geräten zu verhindern.
transition auf die Basis-Regel setzen, nicht innerhalb von :hover, damit die Animation in beide Richtungen gilt.
Keine wesentlichen Inhalte verstecken, die nur beim Hovern erscheinen — sie sind für Touch-Benutzer unsichtbar und können von Screenreadern übersehen werden.
Hover-Menüs mit :focus-within kombinieren, damit Tastaturnavigation sie ohne Maus öffnen kann.
LVHA-Reihenfolge einhalten beim Gestalten von Links: :link, :visited, :hover, :active.

Browser-Unterstützung

:hover wird in allen modernen Browsern unterstützt und ist seit IE 7 für die meisten Elemente verfügbar (IE 6 unterstützte es nur für <a>-Tags). Das @media (hover: hover) Feature-Query wird in Chrome 41+, Firefox 64+, Safari 9+ und Edge 79+ unterstützt.

Übungen

Übung

Wozu dient der :hover-Selektor in CSS?

Er ermöglicht das Ziehen von Text.Er ermöglicht dramatische Transformationen von HTML-Elementen.Er ermöglicht die Angabe eines besonderen Zustands eines Elements.Er wird verwendet, um ein Element zu gestalten, wenn man mit der Maus darüber fährt.Er ermöglicht die Ausrichtung von Text in eine bestimmte Richtung.

Syntax

Links beim Hovern gestalten

Hover bei Inline-Textlinks

Blockelemente beim Hovern

Sanfte Hover-Effekte mit transition

Elternelement hovern, um Kindelemente zu gestalten

Dropdown-Menü-Muster

Hover-Stile für Touch-Geräte absichern

Barrierefreiheit: :hover mit :focus kombinieren

Hover-Effekte bei anderen Eigenschaften

Best Practices

Browser-Unterstützung

Übungen