Mauszeiger (Cursor) mit CSS ändern

Web-Entwicklung
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.



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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Ähnliche Artikel
HTML Sprachcodes: Was sie sind, wofür sie dienen

Die Sprache einer Website wird vielfach durch HTML-Tags übermittelt. Diese werden als HTML Sprachcodes bezeichnet und bestehen aus zwei Kleinbuchstaben. Festgelegt werden die HTML...
mehr lesen

WP-CLI – was ist das und wofür dient es?

Das WordPress Command Line Interface (kurz WP-CLI) bietet für alle, die mit dem Content Management System (CMS) WordPress arbeiten, einige Funktionen und kann dazu...
mehr lesen

WordPress Pagebuilder Plugins: Diese Nachteile muss man kennen

Pagebuilder Plugin für WordPress funktionieren nach einem einfachen und zudem komfortablen Prinzip. Kinderleicht kann man damit eine Webseite aufbauen – oft sogar per Drag...
mehr lesen

WordPress Cron (WP CRON) – worauf es zu achten gilt

Das Unix / Linux Dienstprogramm Cron ist auch für WordPress von Relevanz. Mithilfe von Cron können beispielsweise Befehle geplant werden oder auch Scripte gesteuert....
mehr lesen