CSS cursor und pointer • Mauszeiger ändern

Klick, Touch

CSS kann den Mauszeiger als Fragezeichen darstellen, als Sanduhr oder Warterädchen. Auch ein Bild kann als Mauszeiger eingesetzt werden (aber Vorsicht: schlecht für die Accessibility!). Aber wir dürfen den Touchscreen der mobilen Geräte nicht außer Acht lassen, denn auf Touch-Geräten existiert kein Cursor.

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. Der Mauszeiger sagt dem Benutzer: "Was passiert, wenn ich hier klicke?". In dieser Hinsicht ist der Cursor auch ein semantisches Signal.

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: url(spinner.svg) 16,16, auto }  

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 die Animation startet.

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. Die CSS-Spezifikation legt die Aussage des Cursors fest, aber nicht sein Aussehen. In diesem Sinne werden die Mauszeiger unter verschiedenen Betriebssystemen u.U. unterschiedlich aussehen. Obendrein erlaubt die Spezifikation ausdrücklich, dass die Browser nicht jeden Cursor unterschiedlich darstellen müssen.

Cursor	Symbol	Bedeutung
default		normaler Pfeil
auto		ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.
none		Cursor ausblenden: Kein Mauszeiger: Der Mauszeiger verschwindet und taucht erst wieder auf, wenn die Maus außerhalb des Bereichs bewegt wird.
pointer		klickbar: stellt den Mauszeiger als Pfeil oder als Händchen mit Zeigefinger dar.
text		Text markieren
crosshair		präzise Auswahl
help		Hilfe verfügbar: stellt den Mauszeiger als Fragezeichen dar.
context-menu		Ein Pfeil mit einem kleinen Icon für ein Menü zeigt an, dass hier ein Kontextmenü verfügbar ist
wait		blockierend
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.
not-allowed		Verboten – ein Kreis mit einem diagonalen Durchstrich zeigt an, dass hier eine Aktion nicht erlaubt ist.
no-drop		Drop nicht erlaubt
move		verschieben: betont, dass etwas bewegt werden soll. Üblicherweise ist der Mauszeiger ein Kreuz mit Pfeilen an allen vier Enden.
grab		Zeigt mit einer offenen Hand an, dass hier etwas gepackt werden kann.
grabbing		Die packende Hand greift zu, während die Maustaste gehalten und gezogen wird
copy		kopieren
alias		Verknüpfung – Ein geschwungener Pfeil zeigt an, dass hier etwas erzeugt werden kann
zoom-in		vergrößern
zoom-out		verkleinern
col-resize
row-resize
n-resize		stellt den Mauszeiger als Pfeil dar, der nach oben (north) weist.
e-resize		stellt den Mauszeiger als Pfeil dar, der nach rechts (east) weist.
s-resize		stellt den Mauszeiger als Pfeil dar, der nach unten (south) weist.
w-resize		stellt den Mauszeiger als Pfeil dar, der nach Westen (west) weist.
ne-resize		stellt den Mauszeiger als Pfeil dar, der nach Nordosten weist.
nw-resize		stellt den Mauszeiger als Pfeil dar, der nach Nordwesten weist.
se-resize		stellt den Mauszeiger als Pfeil dar, der nach Südostn weist.
sw-resize		stellt den Mauszeiger als Pfeil dar, der nach Südewesten weist.
ew-resize		stellt den Mauszeiger als Pfeil dar, der nach West-Ost weist.
ns-resize		stellt den Mauszeiger als Pfeil dar, der nach Nord-Süd weist.
nesw-resize		stellt den Mauszeiger als Pfeil dar, der nach Nordost - Südwest weist.
nwse-resize		stellt den Mauszeiger als Pfeil dar, der nach Nordwest - Südost weist.
cell		Tabellenzelle kann gewählt werden: weißes Plus mit schwarzem Rahmen
vertical-text		vertikaler Text
url("urladdress")		Selbstgewähltes Bild also Cursor: jester.ani

Safari unterstützt nur Mauszeiger, die auch vom Betriebssystem verwendet werden. Alles andere gilt als verwirrend und unnötig. Die Empfehlung lautet darum: Lieber keine Spezialcursor verwenden – Cursor sind auch Signale für Screen Reader.

Maus, Trackpad oder Touchscreen?

@media (pointer: fine) prüft, ob das Gerät einen präzisen Zeiger hat – also eine Maus oder ein Trackpad. Die Abfrage unterscheidet zwischen Touchscreen und Maus. Der präzise Zeiger der Maus kann mit kleineren Klickflächen arbeiten.

@media (pointer: coarse) {
	.ontouch {
		display: block;
	}
}

@media (pointer: fine) {
	.ontouch {
		display: none;
	}
}

Während z.B. cursor: pointer den Mauszeiger zu einer Hand verändert, kommt pointer: coarse, pointer: fine aus den Media Queries und stellt die Genauigkeit des Zeigegeräts fest.

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:none fängt Gesten wie Tappen, Scrollen und Ziehen (dragging) ab, damit JavaScript zum Zuge kommt.

@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.

Mauszeiger als Lupe: Einzoomen und Auszoom

.picture {
    cursor: zoom-in;
}

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.