Hover
Beim Rechnen bezeichnet Hover das Bewegen des Cursors über ein interaktives Element – etwa einen Link, eine Schaltfläche oder ein Symbol –, ohne darauf zu klicken. Wenn Sie beispielsweise den Cursor über einen Link auf einer Webseite bewegen, kann sich der Cursor von einem Pfeil in eine Hand verwandeln und der Link seine Farbe ändern, um anzuzeigen, dass er angeklickt werden kann.
Webentwickler können Hover-Effekte mit HTML, CSS oder JavaScript hinzufügen.
- HTML stellt das globale Ereignisattribut onmouseover bereit, das zu einem Link oder einer Schaltfläche hinzugefügt werden kann.
<button onmouseover="myFunction()";>Mit der Maus über mich fahren</button> - CSS stellt die Pseudoklasse :hover bereit, die festlegt, wie ein Element aussehen soll, wenn sich der Zeiger darüber befindet (beispielsweise durch Ändern der Farbe oder Unterstreichen des Textes).
a:hover { color:darkblue; text-decoration: underline; } - JavaScript stellt die Ereignisse mouseover und mouseout bereit, die mithilfe einer „EventListener“-Methode Funktionen oder anderen Code auslösen können.
myElement.addEventListener("mouseover", function() { ... }
Das Konzept des Hovers geht über Webseiten hinaus. Viele Betriebssysteme und Desktop-Anwendungen heben Symbole, Schaltflächen oder Menüs hervor, wenn Sie den Cursor darüber bewegen. Einige Elemente zeigen ein Tooltip an, wenn Sie den Cursor ein oder zwei Sekunden darüber halten. Hover-Feedback macht Benutzeroberflächen intuitiver, indem es zusätzliche Informationen zwischen dem Zeigen und dem Klicken bereitstellt.
Hover und Touchscreens
Da Hover einen Cursor erfordert, gilt es im Allgemeinen nicht für Touchscreens, bei denen die Interaktion hauptsächlich durch Tippen und Gesten erfolgt. Auf Mobilgeräten verwenden Designer häufig Alternativen wie Gedrückthalten oder visuelle Hinweise, um ein ähnliches Feedback bereitzustellen.
Testen Sie Ihr Wissen