Hover (auch Mouseover) bezeichnet den Zustand, in dem sich der Mauszeiger über einem HTML-Element befindet, ohne es anzuklicken. In CSS wird dieser Zustand über die Pseudoklasse :hover gesteuert und ermöglicht visuelle Rückmeldungen wie Farbwechsel, Unterstreichungen oder Übergänge.
Was bedeutet das?
Wenn ein Besucher mit der Maus über ein Element auf einer Webseite fährt, wechselt dieses Element in den Hover-Zustand. CSS erlaubt es, diesem Zustand eigene Darstellungsregeln zuzuweisen. Die Pseudoklasse :hover selektiert ein Element genau dann, wenn der Mauszeiger darüber positioniert ist. Typische Anwendungen sind: Links, die beim Hover eine andere Farbe annehmen, Schaltflächen, die ihre Hintergrundfarbe oder ihren Rahmen verändern, und Bilder oder Kacheln, die beim Hover leicht vergrößert oder abgedunkelt dargestellt werden.
Die CSS-Spezifikation für :hover ist Teil des Selektoren-Moduls des W3C (CSS Selectors Level 3 und 4) und wird von allen modernen Browsern unterstützt. In der Praxis sieht eine :hover-Regel folgendermaßen aus: Für einen Link mit der Klasse nav-link lässt sich über .nav-link:hover { color: #005fa3; } festlegen, dass die Schriftfarbe beim Hover auf ein dunkles Blau wechselt. Kombiniert mit der CSS-Eigenschaft transition lässt sich der Farbwechsel über eine definierte Zeit animieren, was den Übergang weicher macht.
Neben CSS gibt es auf JavaScript-Seite die Browser-Events mouseover und mouseout, die ausgelöst werden, wenn der Mauszeiger ein Element betritt oder verlässt. Das verwandte Event mouseenter unterscheidet sich von mouseover dadurch, dass es nicht durch den Eintritt in Kindelemente erneut ausgelöst wird. Für komplexes interaktives Verhalten, das über eine reine Farbveränderung hinausgeht, zum Beispiel das Einblenden eines Dropdown-Menüs, wird häufig JavaScript eingesetzt.
In WordPress spielen Hover-Effekte vor allem in Themes und im Block-Editor eine Rolle. Die globalen Stile im Site Editor (Full Site Editing) enthalten seit WordPress 6.1 Einstellungen für Interaktionsstile, darunter auch Hover-Farben für Links und Schaltflächen, die ohne CSS-Kenntnisse angepasst werden können.
Beispiel aus der Praxis
Sie bemerken, dass die Schaltflächen auf Ihrer WordPress-Website keine Hover-Rückmeldung geben und dadurch weniger klar als klickbar erkennbar sind. Im Theme-Stylesheet Ihres Child-Themes ergänzen Sie eine Regel wie .wp-block-button__link:hover { background-color: #004a80; }. Damit färbt sich jede Schaltfläche, die mit dem WordPress-Button-Block erzeugt wurde, beim Hover in ein dunkleres Blau. Eine ergänzende transition-Eigenschaft sorgt für einen weichen Übergang über 200 Millisekunden.
Hinweis: Touch-Geräte
Auf Smartphones und Tablets gibt es keinen Mauszeiger und damit keinen echten Hover-Zustand. Touch-Geräte simulieren den Hover-Effekt in manchen Fällen beim ersten Antippen eines Elements, was zu unerwünschten Zustandswechseln führen kann, zum Beispiel wenn ein Hover-Dropdown-Menü versehentlich eingeblendet wird. Interaktive Elemente, die per Hover gesteuert werden, sollten stets auch per Klick oder Touch vollständig bedienbar sein, um die Zugänglichkeit auf allen Gerätetypen sicherzustellen.