CSS cursor • Mauszeiger

CSS cursor und pointer

Der Mauszeiger – cursor – 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Klick, Touch

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.

Die unterschiedlichen Darstellungen des Mauszeigers sind in erster Linie für Anwendungen auf dem Monitor gedacht, während die mobilen Geräte mit dem Touchscreen durch Gesten der Finger bedient werden. Touchscreens müssen mögliche Aktionen auf andere Weise ankündigen: durch Icons, die ein Quasistandard sind und durch Hinweise im Text. Da es ohne Javascript Touchevents kaum eine zuverlässige Erkennung von Touchscreen gibt, müssen wir bei Webseiten immer davon ausgehen, dass der Cursor keine Hilfestellung ist.

Animation mit CSS Cursor
.redcar { cursor: pointer }  /** Mauszeiger zeigt an, dass hier ein Klick zusätzliches Funktionen liefert **/

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.

Wer hier mit dem Handy oder Tablett ankommt, sieht zusätzlich einen Button "Touch!", der auf die Animation startet.

Pointer- und Touch-Device

Nicht vergessen, dass Smartphones 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.

Für Geräte mit einem Touch-Screen stellt CSS touch-actions bereit. touch-action ist spät auf den Plan getreten, denn die Aktionen des Fingers oder Stifts auf dem Touchscreen sind komplizierter als ein Mausklick.

@supports (touch-action:none) {
    .notouch {
        touch-action: none;
    }
}

Auch Mauszeiger und Stifte lassen sich für ein Element außer Kraft setzen: Kein Klick, kein Tap, kein Hover, kein Zugriff auf Eingabefelder.

.elem {
	pointer-event:none;
}

pointer-event: auto; führt zurück zum Standardverhalten. pointer-event: inherit ist der dritte Wert und wird z.B. eingesetzt, um den Zugriff auf Elemente unter einem Overlay frei zu geben.

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 | all-scroll | 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
}
alias
Ein geschwungener Pfeil zeigt an, dass hier etwas erzeugt werden kann
all-scroll
kann in alle Richtungen gescrollt werden.
auto
ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.
cell
Zelle kann gewählt werden: weißes Plus mit schwarzem Rahmen
context-menu
Ein Pfeil mit einem kleinen Icon für ein Menü zeigt an, dass hier ein Context Menü verfügbar ist
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.
none
Kein Mauszeiger: Der Mauszeiger verschwindet und taucht erst wieder auf, wenn die Maus außerhalb des Bereichs bewegt wird.
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.
vertical-text
Vertikalen Text einfügen
wait
stellt den Mauszeiger üblicherweise als Stundenglas oder Uhr dar, um anzuzeigen, dass der Benutzer noch auf die Bearbeitung eines Prozesses warten muss.
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.

Mauszeiger als Lupe: Einzoomen und Auszoom

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

Zoomen!

Pointer Events

CSS pointer-events legt fest, ob ein Element auf Stift oder Maus reagiert. Mit pointer-events: none reagiert ein Element nicht auf Klicks oder Hovern.

elem-1 {
  pointer-events: none;
}

pointer-events: auto stellt die natürliche Aktion des Elements auf einen Klick oder Hovern wieder her. Eine dritte Eigenschaft ist pointer-events: inherit, mit der ein Element das Verhalten seines Eltern-Elements übernimmt. Praktisch, wenn ein Element ein andere überlagert: Mit pointer-events: inherit könnte ein Button dann trotzdem geklickt oder ein Text selektiert werden.