Mauszeiger (Cursor) mit CSS ändern

• Home
• Blog
• Mauszeiger (Cursor) mit CSS ändern

Mit CSS lässt sich so ziemlich die gesamte Gestaltung einer Webseite beeinflussen. Das gilt auch für den Mauszeiger innerhalb einer Webseite. In diesem Artikel erklären wir, wie man den Mauszeiger mittels CSS ändern kann und welche verschiedenen Mauszeiger es gibt.

Der Mauszeiger auf einer Webseite wird automatisch vom verwendeten Browser vorgegeben — als Pfeil. Bei einem Hover / Mouse Over über z.B. einen Link erscheint standardmäßig eine Hand bzw. ein Finger, welcher die Möglichkeit einer Interaktion aufzeigen soll. Wer den Mauszeiger grundsätzlich oder eben für bestimmte Elemente bzw. Teilbereiche einer Webseite verändern möchte, kann dies ganz einfach und schnell per Cascading Style Sheets (CSS) über die Anweisung „Cursor“ tun. So kann der Maus-Cursor beispielsweise als Fadenkreuz oder Sanduhr dargestellt werden.

Tipp: Wir empfehlen aus Sicht der Usability einer Webseite keine gewohnten „Grundsätze“ zu verändern. Die „Klickbarkeit“ von Links mittels Hand/Finger Symbol ist beispielsweise für jeden verständlich und seit jeher in der Gewohnheit der Nutzer eingeprägt. Ein solches Detail einfach zu ändern, könnte für den Nutzer verwirrend sein.

Wie kann man den Mauszeiger mit CSS ändern?

CSS Beispiele

In den beiden nachfolgenden Beispielen zeigen wir, wie ein Element mit einem Zeigefinger-Mauszeiger (Pointer) und mit einem individuellen Bild ausgestattet wird.

.maus-beispiel {cursor: pointer;}
.maus-beispiel-bild { cursor: url(maus.gif), auto }

Natürlich lässt sich die CSS-Anweisung cursor nicht nur auf z.B. CSS-Klassen anwenden, sondern z.B. auch auf <li> oder für Links allgemein <a>.

Liste der CSS Mauszeiger

• auto (Mauszeiger wird automatisch vom System eingestellt)
• default (Standard-Mauszeiger, Plattformunabhängig)
• crosshair (Fadenkreuz)
• pointer (Hand)
• move (Mauszeiger mit vier Pfeilen)
• n-resize (Pfeil nach oben)
• ne-resize (Pfeil nach rechts oben)
• e-resize (Pfeil nach rechts)
• se-resize (Pfeil nach rechts unten)
• s-resize (Pfeil nach unten)
• sw-resize (Pfeil nach links unten)
• w-resize (Pfeil nach links)
• nw-resize (Pfeil nach links oben)
• text (Textcursor)
• wait (Sanduhr)
• help (Fragezeichen)
• url(); (beliebiger Mauszeiger, sollte eine GIF- oder JPG-Grafik sein)
• Inherit

CSS Cursor und Smartphones / Tablets

Die Cursor werden auf mobilen Endgeräten wie Smartphones und Tablets nicht angezeigt. Die CSS Anweisung Cursor hat somit keine Auswirkung.

Spannende Artikel und Infos zum Thema

• Was ist PHP?
• Was ist CSS3?
• Was ist HTML5?
• Was ist MySQL?
• WordPress lokal auf Mac OS (X) installieren
• Webspace, vServer oder Root-Server?
• WordPress Programmierung
• WordPress Theme Entwicklung
• WordPress Plugin Entwicklung

Sie benötigen eine WordPress Agentur? Wir stehen als Ihre Experten zur Verfügung. Treten Sie mit uns in Kontakt und vereinbaren Sie ein unverbindliches Beratungsgespräch.