CSS cursor • Mauszeiger

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.

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

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.