Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Ihre Suchergebnisse

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

    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">Menu</a>
          <ul>
            <li>
              <a href="example.html">Link</a>
            </li>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li>
                  <a class="menu-nav" href="example.html">Submenu</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 bedeutenden Veränderungen.
    CSS Level 2 (Revision 1)
    Die Definition von ':hover' in dieser Spezifikation.
    Empfehlung Ursprüngliche Definition.

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
    für <a> Elemente 0.2 1.0 (1.7 oder früher) 4.0 4.0 2.0.4 (419)
    verschiedene Bugs vorher
    für alle Elemente 0.2 1.0 (1.7 oder früher) 7.0 7.0 2.0.4 (419)
    verschiedene Bugs vorher
    für Pseudoelemente ? 28 (28) ? ? ?
    Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

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

    Beim 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:

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: Hecky77, felhe
    Zuletzt aktualisiert von: felhe,