Was ist Mouseover?

Ein Mouseover (auch bekannt als Mouse Hover, Hover-Effekt, Rollover oder Hover-Box) ist eine Aktion, die auftritt, wenn der Benutzer den Mauszeiger oder digitalen Stift auf dem Bildschirm über ein bestimmtes Element anhält oder “schweben” lässt. Das Halten oder “Schweben” der Maus an der mit dem Effekt versehenen Stelle (Triggerbereich), zeigt dann zusätzliche Informationen an bzw. verändert sich in Form, Farbe oder eine zuvor nicht sichtbare Grafik erscheint.

Mousover-Hover-Effekt

Aussehen

Wie sieht ein Mouseover-Effekt aus? Die folgende Grafikanimation verdeutlicht es. Sobald der Mauszeiger über das Icon mit dem Zeigefinger fährt, ändert sich dessen innere Farbe und gleichzeitig wird das Icon weiß (invertieren = Farbumkehr).  Praktisches-Beispiel-Andere-Iconafarbe-Mouseover

Zusatzinfos erscheinen normalerweise in einem kleinen Textfeld und werden durch die Webseite oder Anwendung bereitgestellt. Als Gestaltungstechnik kann die Funktion auch bei Navigationselementen verwendet werden, um die jeweiligen Auswahlmöglichkeiten für den Nutzer besser darzustellen und eine Form von Navigation-Feedback darstellen.

Live zu sehen ist dieser Effekt z.B. auf den Kacheln unserer Unterseite für gratis Bilderquellen. Dort wird der unten abgebildete Effekt für eine intuitivere und übersichtliche Navigationsführung genutzt. Auf der Seite für Marketing-Zitate nutzen wir einen leichten Vergrößerungseffekt beim Hovern über ein Bild.

Häufige Anwendungsbereiche

Die Aktion tritt häufig auf, wenn ein Webbrowser auf einem Desktop-Computer verwendet wird und wird vom Website-Entwickler beim Erstellen der Website erstellt.

Tatsächlich gibt es einen HTML-Befehl namens :hover, der verwendet wird, um den Effekt auf einer Webseite zu erzeugen. Wenn der Benutzer den Mauszeiger über den hover-aktivierten Bereich der Webseite “schweben” lässt, erscheint ein kleines Textfeld, das dem Benutzer anzeigt, welche Optionen beim Klicken der Maustaste verfügbar sind.

CSS-Code für die Änderung der Hintergrundfarbe zu Blau beim Hovern über ein Zitat

<style>
blockquote:hover {
background-color: blue;
}
</style>

Bilder nutzen oft die Mouseover-Funktion auf Webseiten. Wenn der Benutzer über ein Bild “schwebt”, werden zusätzliche Informationen über das Bild angezeigt, wie z.B. der Name des Fotos oder Urheberrechtsinformationen (Tooltip, Infotip). Nicht jedes Foto oder Bild zeigt Informationen an, da die Mouseover-Funktion davon abhängt, ob die Informationen auf der Website oder im Softwareprogramm verfügbar sind.

Der Mouseover-Effekt wird auch verwendet, um Optionen auf der Webseite zu verbergen, aber dennoch verfügbar zu machen, wenn ein Benutzer auf einen bestimmten Bereich auf dem Bildschirm zeigt. Ein Website-Entwickler möchte vielleicht keinen Button anzeigen, um Ablenkungen zu vermeiden, aber der scheinbar leere Bereich der Webseite zeigt dem Benutzer Optionen an, indem er die Maus an einer bestimmten Stelle hält. Ein gängiges Beispiel ist Facebooks Webseite.

Beim Betrachten des NewsFeed auf Facebook zeigt das Schweben über den Namen einer Person das Profilbild und das Titelbild aus der Timeline an, was das Erkennen und Ansehen von Updates von Freunden erleichtert, ohne das Facebook-Profil besuchen zu müssen. Eine weitere Hover-Aktion ist verfügbar, wenn der Mauszeiger neben einem Kommentar gehalten wird, was die Option anzeigt, den Kommentar in der Timeline zu verbergen. Die Mouseover-Aktionen auf Facebooks Webseite können sich natürlich jederzeit ändern.

Ein weiterer Einsatz von Mouseover besteht darin, Optionen oder Auswahlmöglichkeiten aufzulisten, die vom Benutzer getroffen werden können, wenn die Maustaste geklickt wird, um dem Benutzer die verfügbaren Optionen zu zeigen. Ein Mouseover sollte nicht mit einem „Rechtsklick“-Mausbefehl verwechselt werden, der auch eine gängige Aktion ist, die dem Benutzer verfügbare Aktionen anzeigt. Ein Mouseover erfordert lediglich das Halten des Mauszeigers an einer Stelle, während die Rechtsklick-Aktion einen Mausklick erfordert.

Hover-Effekt bei Mousover

Mobilgeräte und Touchscreens

Da mobile Touchscreens keine Maus verwenden (Finger ist das Äquivalent), ist die Hover-Aktion nicht verfügbar, wenn Webseiten auf Touchscreen-Webbrowsern betrachtet werden. Tatsächlich macht die Größe des Bildschirms einen Unterschied. Tablets zeigen normalerweise Mouse-Hover-Informationen als Dropdown-Liste an, aber kleinere Touchscreens von Telefonen ignorieren die Mouseover-Aktion oft vollständig.

Da mobile Geräte für das Betrachten von Webseiten immer beliebter werden (“Mobile first”), ringen Webseiten-Designer mit Alternativen zum Mouseover, das bisher weitgehend für Desktop- und Laptop-Geräte mit Maus oder Trackpad verwendet wurde. Das Fehlen der Möglichkeit, auf mobilen Geräten Hilfsinformationen oder zusätzliche Funktionsoptionen ohne die Mouseover-Funktion bereitzustellen.

Als Ergebnis werden viele Webseiten mit zwei verschiedenen Versionen entworfen, einer für den mobilen Gerätebenutzer (ohne Mouseover oder Hover-Aktionen) und einer für den Desktop- oder Laptop-Benutzer mit einer Maus oder einem Trackpad. Die Verwendung der Mouseover-Aktion könnte abnehmen, da die Nutzung mobiler Geräte zunimmt, da viele Menschen Webseiten häufiger von mobilen Geräten aus besuchen, anstatt von Desktops.

Während sich Webseitenentwickler sowohl um Desktop- (oder Laptop-) als auch um mobile Gerätebenutzer kümmern, wissen Softwareprogramme, die für Desktops oder Laptops entworfen wurden, dass der Computerbenutzer eine Maus oder ein Trackpad verwenden wird, sodass sie die Mouseover-Aktion in das Softwareprogramm einbauen können.

Softwareprogramme

Viele beliebte Softwareprogramme, einschließlich Textverarbeitungs- und Buchhaltungsprogramme, haben komplizierte Symbolleisten und umfangreiche Layouts mit kleinen Symbolen auf dem Bildschirm. Das “Schweben” oder Anhalten des Bildschirmindikators über einem Symbol oder Zeichen enthüllt den Namen und die Funktion dieser bestimmten Option. Diese Informationen enthalten oft Hilfe für die spezifische Schaltfläche, Aktion oder sogar den Bereich des Bildschirms, auf dem der Mauszeiger ruht.

Softwareprogramme verwenden häufig die Mouse-Over-Aktion, um Hilfsinformationen anzuzeigen, die im „Kontext“ stehen, was bedeutet, dass die Informationen sich auf die spezifische Schaltfläche, Aktion oder den Bildschirm beziehen, den der Benutzer gerade verwendet. Als Beispiel könnte beim Schweben über eine Schaltfläche ein Hilfstipp für diese spezifische Schaltfläche erscheinen, um dessen Funktion zu erklären.

Fazit

Mouseover kann als Weg betrachtet werden, um mehr über die genutzten Webseiten und Softwareprogramme zu erfahren. Indem der Bildschirmindikator über bestimmte Schlüsselelemente auf dem Bildschirm “schwebt”, bevor aktiv darauf geklickt wird, lässt sich besser abschätzen, welche Aktionen bei einem Klick der Maustaste erfolgen.

Beim erstmaligen Einsatz eines neuen Softwareprogramms oder beim Besuch einer Webseite, könnte die Maus bewusst langsam und bedacht über den Bildschirm bewegt werden, um ihr genügend Zeit zu geben, über Bereiche auf dem Bildschirm zu “schweben”. Das Ergebnis dieser kurzen Auszeit könnten kleine Überraschungen sein. Es ist jedoch zu beachten, dass die Mouseover-Funktion bei der Verwendung eines Smartphones oder Tablets wahrscheinlich nicht zur Verfügung steht.