CSS cursor • Mauszeiger

CSS cursor und pointer – Mauszeiger verändern und Touchscreen beachten

Der Mauszeiger wird ohne CSS vom Browser vorgegeben. Beim Hovern über Links wird der Mauszeiger in allen Browsern zum Zeigefinger und zeigt, dass hier etwas auf den Mausklick reagieren will.

CSS kann den Mauszeiger als Fragezeichen darstellen, als Sanduhr oder Warterad. Auch ein Bild kann als Mauszeiger eingesetzt werden. Aber wir dürfen den Touchscreen der mobilen Geräte nicht außer Acht lassen.

CSS cursor: pointer kennzeichnet einen Text oder eine Grafik als klickbar – meist beim Hovern über einem Element, wenn die Aktion durch ein Javascript Click-Event und nicht durch einen Link erzeugt wird.

Animation mit CSS Cursor
.redcar { cursor: pointer }           // Mauszeiger als Zeigefinger 

Achtung! Smartphones, iPads und Tabletts erwarten Gesten und zeigen den Mauszeiger nicht an. Entweder muss die Funktion hinter dem Mauszeiger durch CSS oder durch ein Javascript für die Benutzer des Smartphones, iPads oder Tabletts erkennbar gemacht werden.

Cursor und Touch-Device

Nicht vergessen, dass Smartphones, iPads und Tabletts keine Maus haben! Im Gegensatz zur Maus, mit der ein Benutzer die Seite auch »scannt«, hovert der Benutzer nicht mit dem Finger über das Smartphone oder das Tablett.

Modernizr stellt eine solide Technik zum Erkennen eines Touch-Device bereit.

if (Modernizr.touchevents) {
  // supported
} else {
  // no touch device
}

Auf einem Touch-Device sitzt ein Button TOUCH! unter dem Bild oben und zeigt an, dass mit einem Touch auf das rote Auto eine Aktion startet. Auf dem Monitor des Computers zeigt der veränderte Cursor, dass ein Click-Event etwas in Gang setzt.

Oder ganz einfach

if ("ontouchstart" in window) {
   /* Dieser Browser unterstützt touch-Events */
}

Das funktioniert in allen modernen Browsern. Wenn ältere Browser unterstützt werden müssen, doch besser Modernizr.

CSS für den Mauszeiger: cursor

Erblich: Ja

cursor
steuert die Darstellung des Mauszeigers. Die meisten Browser unterstützen nicht alle möglichen Darstellungen.
Werte
[ url(urladdress), ]* [ auto | crosshair | default | help | move | pointer | e-resize | n-resize | ne-resize | nw-resize | progress | s-resize | se-resize | sw-resize | w-resize | text | wait ] | inherit

Die meisten Werte für cursor funktionieren heute zuverlässig in allen Browsern – mit kleinen Einschränkungen

url("urladdress")
ist eine von Kommas getrennte Liste von einer oder mehreren URLs und stellt die Adresse eines eigenen Mauszeigers dar. Browser erkennen eigene Mauszeiger nicht unbedingt, darum ist es besser, einen normalen Mauszeiger (default) an das Ende der Liste zu setzen (ähnlich wie eine allgemeine Schrift »serif« am Ende der Schriftenliste).
.maus_url {
   cursor: url(img/jester.ani),
   url(img/tail.ani),
   url(img/normal.cur),
   move
}
auto
ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.
crosshair
stellt den Mauszeiger als großes dünnes Pluszeichen dar.
cursor:grab
Zeigt mit einer offenen Hand an, dass hier etwas gepackt werden kann.
cursor:grabbing
Die packende Hand greift zu, während die Maustaste gehalten und gezogen wird
default
überlässt dem Browser die Darstellung des Mauszeigers.
help
stellt den Mauszeiger als Fragezeichen oder Ball dar.
move
betont, dass etwas bewegt werden soll. Üblicherweise ist der Mauszeiger ein Kreuz mit Pfeilen an allen vier Enden.
not allowed
Verboten – ein Kreis mit einem diagonalen Durchstrich zeigt an, dass hier eine Aktion nicht erlaubt ist.
no-drop
wie not allowed: Ein durchgestrichener Kreis zeigt an, dass hier keine drop-Region liegt.
pointer
stellt den Mauszeiger als Pfeil oder als Händchen mit Zeigefinger dar.
progress
ist ein Fortschritts-Indikator. Das Programm führt eine Aufgabe durch, aber im Gegensatz zur Anzeige »wait« kann der Benutzer weiter mit dem Programm arbeiten.
e-resize
stellt den Mauszeiger als Pfeil dar, der nach rechts (east) weist.
n-resize
stellt den Mauszeiger als Pfeil dar, der nach oben (north) weist.
ne-resize
stellt den Mauszeiger als Pfeil dar, der nach rechts oben (north-east) weist.
nw-resize
stellt den Mauszeiger als Pfeil dar, der nach links oben (north-west) weist.
s-resize
stellt den Mauszeiger als Pfeil dar, der nach unten (south) weist.
se-resize
stellt den Mauszeiger als Pfeil dar, der nach rechts unten (south-east) weist.
sw-resize
stellt den Mauszeiger als Pfeil dar, der nach links unten (south-west) weist.
w-resize
stellt den Mauszeiger als Pfeil dar, der nach links (west) weist.
text
stellt den Mauszeiger als "I" dar, mit dem Text gekennzeichnet und eingefügt wird.
wait
stellt den Mauszeiger üblicherweise als Stundenglas oder Uhr dar, um anzuzeigen, dass der Benutzer noch auf die Bearbeitung eines Prozesses warten muss.

Mauszeiger als Lupe: Einzoomen und Auszoom

.picture {
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
}

Zoomen!

CSS3 Mauszeiger

none
Kein Mauszeiger
content-menu
cell
Ein Pluszeichen
vertical-text
Vertikalen Text einfügen
alias
zoom-in
Eine Lupe mit Plus-Symbol zeigt an, dass sich der Inhalt einzoomen lässt. zoom-in und zoom-out müssen für ältere Browser noch mit Browserpräfix notiert werden:
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
zoom-out
Eine Lupe mit Minus-Symbol zeigt an, dass sich der Inhalt auszoomen lässt.