:hover | CSS-Tricks

Die :hover Pseudo-Klasse in CSS wählt Elemente aus, wenn sich der Mauszeiger darüber befindet. Sie wird häufig mit Link-Elementen (<a>) assoziiert.

a:hover {
  color: green;
  text-decoration: underline overline;
}

Wenn also ein Link wie dieser „gehovert“ wird (wie mit einem Cursor auf einem Gerät mit einer Maus)

<a href="https://google.com">Go to Google</a>

wird er grün und hat eine Linie darunter und darüber.

In IE 6 und älter funktionierte :hover nur bei Links, aber in neueren Browsern funktioniert es bei jedem Element. Dies kann besonders nützlich für Dinge wie Dropdown-Menüs sein, bei denen Sie auf den :hover eines übergeordneten Listenelements warten und dann die nächste Ebene des verschachtelten Menüs anzeigen können. Aber Vorsicht, Hover-Effekte sollten mit einer Art von Aktion gekoppelt sein, da dies ein lang etabliertes Webmuster ist.