: schweben - CSS-Tricks

Anonim

Die :hoverPseudoklasse in CSS wählt Elemente aus, wenn der Mauszeiger über ihnen aktuell ist. Es ist häufig mit link ( ) Elementen verbunden.

a:hover ( color: green; text-decoration: underline overline; )

Wenn also ein Link wie dieser "schwebt" (wie mit einem Cursor auf einem Gerät mit einer Maus):

Go to Google

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

In IE 6 und niedriger :hover funktioniert es nur mit Links, in neueren Browsern jedoch mit jedem Element. Dies kann besonders nützlich sein für Dinge wie Dropdown-Menüs, in denen Sie auf das :hover Element eines übergeordneten Listenelements warten und dann die nächste Ebene des verschachtelten Menüs anzeigen können . Vorsicht, Schwebeeffekte sollten jedoch mit einer Aktion verbunden sein, da dies ein seit langem etabliertes Webmuster ist.

verbunden

  • :Verknüpfung
  • :hat besucht
  • :Fokus
  • :aktiv
  • Hassliebe

Mehr Ressourcen

  • MDN Docs on: Hover
  • Die W3C-Spezifikation für: Hover

Browser-Unterstützung

Die :hoverPseudoklasse wird von allen Browsern unterstützt.