:hover

Ü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.

Beispiele

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Dropdown Menü

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.

Spezifikationen

Browser Kompatibilität

In IE8-11, wenn der Mauszeiger über ein Element fährt und schließlich auf oder ab gescrollt wird, ohne den Mauszeiger zu bewegen, bleibt das Element im :hover Status, bis der Mauszeiger bewegt wird. Siehe IE Bug 926665.

In IE9 (und möglicherweise früher), falls eine <table> ein Elternelement mit einer width, die nicht auto ist, hat und overflow-x: auto; und die <table> genug Inhalt hat, um sein Elternelement horizontal zu überlaufen und :hover Styles für das Element innerhalb der Tabelle gesetzt sind, dann vergrößert das Darüberfahren mit der Maus die Höhe der <table>. Hier gibt es ein Livebeispiel, das den Bug auslöst. Ein Workaround für den Bug ist das setzen von min-height: 0%; für das Elternelement der Tabelle (die Prozenteinheit muss angegeben werden; 0 und 0px funktionieren nicht). Für mehr Details siehe jQuery Ticket #10854.

Bei Safari Mobile für iOS 7.1.2 führt das Berühren eines klickbaren Elements dazu, dass das Element im :hover Status bleibt, bis auf ein anderes Element der :hover Effekt angewendet wird.

Siehe auch:

• Chromium bug #370155: Don't make :hover sticky on tap on sites that set a mobile viewport
• Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.