CSS :hover Pseudo Class

Die Pseudo-Klasse :hover wählt und gestaltet das schwebende Element aus. Sie wird vom Benutzer abgedeckt.

Die Elemente bewegen sich, wenn der Benutzer mit der Maus über das Element führt. Es aktiviert die Zeigevorrichtung nicht.

:link, :active, oder :visited pseudo-classes überschreiben den durch die :hover pseudo-class definierten Stil.

Viele Touchgeräte unterstützen :hover nicht, da sie Probleme mit dem Abgleich haben.

Version

CSS1

Syntax

:hover {
css declarations;
}

Beispiel

<!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://de.w3docs.com/">W3docs.com</a>
  </body>
</html>

Versuch es selber!

Bewegen Sie den Mauszeiger über die Links, um zu sehen, wie sich die Farbe ändert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      a {
      color: #1c87c9;
      }
      a:hover {
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector </h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und <a href="#">Satzindustrie</a>. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den <a href="#">elektronischen</a> Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie <a href="#">Aldus PageMaker</a> mit Versionen von Lorem Ipsum.</p>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit :hover pseudo-class:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 30px;
      background-color: #8ebf42;
      color:#eee;
      }
      div:hover {
      background-color: #666;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector </h2>
    <div>
      Lorem Ipsum ist ein Blindtext...
    </div>
  </body>
</html>