Übersicht

Die :hover CSS Pseudoklasse wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren. Dieser Stil kann von weiteren Link-abhängigen Pseudoklassen überschrieben werden: :link, :visited und :active. Um nur entsprechende Links auszuwählen, ist es wichtig die :hover Regel nach den :link und :visited Regeln, aber vor der :active Regel zu erwähnen, wie beschrieben in der LVHA-Reihenfolge: :link:visited:hover:active.

Die :hover Pseudoklasse kann auf alle Pseudoelemente angewendet werden.

Webbrowser (User-Agents) wie Firefox, Internet Explorer, Safari, Opera oder Chrome, wenden den zugehörigen Stil an, wenn der Cursor (Mauszeiger) über ein Element fährt.

Hinweis: Auf Touchscreens ist :hover problematisch oder unmöglich. Abhängig vom Browser, tritt die :hover Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt. Weil Touchscreen-Geräte oft gleich sind, ist es wichtig für Webentwickler, keinen Inhalt zu haben, der nur über die :hover Pseudoklasse aufrufbar ist, da es für Nutzer von solchen Geräten schwierig oder unmöglich ist, diesen Inhalt aufzurufen.

Beispiele

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Mit der :hover Pseudoklasse kann man komplexe Algorithmen in CSS erstellen. Dies ist eine verbreitete Methode, die genutzt wird, um beispielsweise Dropdown Menüs nur mit CSS (ohne JavaScript) zu erstellen. Die Idee dieser Methode ist das Erstellen einer Regel, wie die Folgende:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

Sie kann auf folgende HTML Struktur angewendet werden:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menü</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Untermenü</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Untermenü</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Sieh dir unser CSS-basiertes Dropdown Menü Beispiel für eine mögliche Lösung an.

Galerie mit Vollbild-Bildern und Vorschauen

Man kann die :hover Pseudoklasse nutzen, um eine Bildergalerie mit Vollbild-Bildern, welche nur angezeigt werden, wenn der Nutzer mit der Maus über die Vorschau fährt, zu erstellen. Sieh dir dafür diese Demo an.

Hinweis: Für einen analogen Effekt, der jedoch auf der :checked Pseudoklasse basiert (angewendet auf Auswahlfelder), sieh dir diese Demo an, übernommen von der :checked Seite.

Spezifikationen

Spezifikation Status Anmerkung
Selectors Level 4
Die Definition von ':hover' in dieser Spezifikation.
Arbeitsentwurf Kann auf jedes Pseudoelement angewendet werden.
Selectors Level 3
Die Definition von ':hover' in dieser Spezifikation.
Empfehlung Keine wesentlichen Veränderungen
CSS Level 2 (Revision 1)
Die Definition von ':hover' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 2WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android ? Safari iOS Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.
Samsung Internet Android ?
<a> element support
Nicht standardisiert
Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
All elements support
Nicht standardisiert
Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 5381673.
Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 7
Hinweise
Vollständige Unterstützung 7
Hinweise
Hinweise In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 926665.
Hinweise In Internet Explorer 9 (and possibly earlier), if a <table> has a parent with a non-auto width, overflow-x: auto;, the <table> has enough content to horizontally overflow its parent, and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; (the % unit must be specified, since unitless and px don't work) on the <table>'s parent element.
Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Pseudo-element supportChrome ? Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 28IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch:

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Sebastianz, felhe, Hecky77
Zuletzt aktualisiert von: SJW,