Beim Hover-Effekt handelt es sich um ein spezielles Ereignis. Es wird mittels einer Mausbewegung ausgelöst – indem man über das entsprechende Element fährt.

Häufig wird der Hover-Effekt bei Navigationsleisten, Buttons oder in diversen Menüs verwendet. Er wird gezielt eingesetzt, um das entsprechende Element optisch aufzuwerten und um gleichzeitig bspw. einen Menüpunkt hervorzuheben oder eine Interaktion anzuzeigen.


Hier ein kleines Beispiel eines Hover-Menüs:

Der Begriff „Hover“ kommt aus dem Englischen und bedeutet so viel wie „schweben“. Im CSS wird er als Pseudoklasse bezeichnet, die auf die unmittelbare Interaktion des Benutzers reagiert. Die :hover Pseudoklasse kann auf alle Pseudoelemente angewandt werden.

Man kann den Hover-Effekt natürlich auch umfunktionieren und ihn für tolle Special Effects nutzen. Ich verwende ihn gerne, um aus Grafiken oder Fotografien kleine Animationen zu erstellen, die als Hingucker dienen können.

Hier ein Beispiel:

Hierbei handelt es sich um zwei, mittels Photoshop bearbeitete Fotografien, die durch den Hover-Effekt aktiviert werden. Das Darüberfahren mit der Maus aktiviert sozusagen das zweite Bild mit den geöffneten Augen, wodurch es so aussieht, als würde es sich bewegen bzw. als würden sich die Augen öffnen.

Die Hover-Pseudoklasse ist äußerst vielseitig einsetzbar und relativ einfach umzusetzen. Schade ist nur, dass dieser Effekt auf Touchscreens nicht funktioniert.

Verfasst von

Inns Web

Das junge Unternehmen Inns-Web, aus Innsbruck Tirol, bietet Ihnen professionell gestaltete Responsive-Websites auf HTML5 und CSS3 Basis.