CSS, HTML und Javascript mit {stil}

CSS cursor • Mauszeiger

CSS cursor und pointer – Mauszeiger verändern und Touchscreen

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 Warterädchen. Auch ein Bild kann als Mauszeiger eingesetzt werden.

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

Heute müssen wir auch daran denken, dass Smartphones, iPads und Tabletts keine Maus haben. Die Benutzerschnittstelle einer Webseite ändert sich durch die neuen Geräte. 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 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.

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 generischen Mauszeiger (default) an das Ende der Liste zu setzen (ähnlich wie eine generische Schrift »serif« ans Ende einer Schriftenliste). Anders als die vordefinierten Mauszeiger wird ein alternatives Bild für cursor von keinem Browser unterstützt.
auto
ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.
crosshair
stellt den Mauszeiger als großes dünnes Pluszeichen dar.
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.
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.

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 noch mit Browserpräfix notiert werden:
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
zoom-out
Eine Lupe mit Minus-Symbol zeigt an, dass sich der Inhalt auszoomen lässt.
CSS cursor und pointer