cursor

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Die cursor-Eigenschaft wird als null oder mehr <url>-Werte angegeben, getrennt durch Kommas, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jede <url> sollte auf eine Bilddatei verweisen. Der Browser versucht, das erste angegebene Bild zu laden und fällt auf das nächste zurück, wenn es nicht geladen werden kann, und fällt auf den Schlüsselwortwert zurück, wenn keine Bilder geladen werden konnten (oder wenn keine angegeben wurden).

Jede <url> kann optional von einem Paar aus einem Leerzeichen getrennten Zahlen gefolgt werden, die die <x>- und <y>-Koordinaten des Cursor-Hotspots relativ zur oberen linken Ecke des Bildes festlegen.

<url> Optional

Ein url() oder eine durch Kommas getrennte Liste url(), url(), …, die auf eine Bilddatei verweist. Mehr als ein <url> kann als Fallbacks angegeben werden, falls einige Cursor-Bildtypen nicht unterstützt werden. Ein Nicht-URL-Fallback (eines oder mehrere der Schlüsselwortwerte) muss am Ende der Fallback-Liste stehen.

<x>, <y> Optional

Optionale x- und y-Koordinaten, die den Cursor-Hotspot angeben; die genaue Position innerhalb des Cursors, die angezeigt wird.

Die Zahlen sind in Einheiten von Bildpixeln. Sie sind relativ zur oberen linken Ecke des Bildes, die 0 0 entspricht, und sind innerhalb der Grenzen des Cursor-Bildes begrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und standardmäßig an der oberen linken Ecke des Bildes liegen.

keyword

Ein Schlüsselwortwert muss angegeben werden, das entweder den zu verwendenden Cursor-Typ oder den Fallback-Cursor angibt, der verwendet werden soll, wenn alle angegebenen Symbole nicht geladen werden können.

Die verfügbaren Schlüsselwörter sind in der untenstehenden Tabelle aufgeführt. Abgesehen von none, das bedeutet, dass kein Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können die Maus über die Tabellenzeilen bewegen, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte heute in Ihrem Browser zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Der Benutzeragent bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z. B. äquivalent zu text beim Überfahren von Text.
	default		Der plattformabhängige Standard-Cursor. Typischerweise ein Pfeil.
	none		Es wird kein Cursor gerendert.
Links & Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfeinformation ist verfügbar.
	pointer		Der Cursor ist ein Zeiger, der auf einen Link hinweist. Typischerweise ein Bild einer zeigenden Hand.
	progress		Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Benutzeroberfläche interagieren (im Gegensatz zu wait).
	wait		Das Programm ist beschäftigt, und der Benutzer kann nicht mit der Benutzeroberfläche interagieren (im Gegensatz zu progress). Manchmal ein Bild einer Sanduhr oder einer Uhr.
Auswahl	cell		Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
	crosshair		Kreuz-Cursor, oft verwendet, um eine Auswahl in einem Bitmap anzuzeigen.
	text		Der Text kann ausgewählt werden. Typischerweise die Form eines Textbalkens.
	vertical-text		Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitwärts liegenden Textbalkens.
Ziehen & Ablegen	alias		Ein Alias oder eine Verknüpfung soll erstellt werden.
	copy		Etwas soll kopiert werden.
	move		Etwas soll verschoben werden.
	no-drop		Ein Element darf nicht an der aktuellen Position abgelegt werden. Firefox-Fehler 275173: Unter Windows und macOS ist no-drop dasselbe wie not-allowed.
	not-allowed		Die angeforderte Aktion wird nicht ausgeführt.
	grab		Etwas kann ergriffen werden (zum Verschieben gezogen werden).
	grabbing		Etwas wird gerade ergriffen (zum Verschieben gezogen).
Größenänderung & Scrollen	all-scroll		Etwas kann in jede Richtung gescrollt werden (verschoben). Firefox-Fehler 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize		Das Element/Spalte kann horizontal in der Größe verändert werden. Oft als Pfeile dargestellt, die links und rechts zeigen, mit einer vertikalen Leiste dazwischen.
	row-resize		Das Element/Zeile kann vertikal in der Größe verändert werden. Oft als Pfeile dargestellt, die nach oben und unten zeigen, mit einer horizontalen Leiste dazwischen.
	n-resize		Eine Kante soll verschoben werden. Beispielsweise wird der se-resize-Cursor verwendet, wenn die Bewegung vom Südost-Eckpunkt des Rahmens ausgeht. In einigen Umgebungen wird ein äquivalenter bidirektionaler Größenänderungs-Cursor angezeigt. Zum Beispiel sind n-resize und s-resize dasselbe wie ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Bidirektionaler Größenänderungs-Cursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoomen	zoom-in		Etwas kann herein- oder herausgezoomt werden.
	zoom-out

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Obwohl die Spezifikation die Bildgröße des cursor nicht limitiert, beschränken Benutzeragenten diese gewöhnlich, um möglichen Missbrauch zu vermeiden. Zum Beispiel sind in Firefox und Chromium Cursorbilder standardmäßig auf 128x128 Pixel beschränkt, aber es wird empfohlen, die Cursorbildgröße auf 32x32 Pixel zu beschränken. Cursoränderungen mit Bildern, die größer sind als die maximal unterstützte Größe des Benutzeragenten, werden im Allgemeinen einfach ignoriert.

Laut Spezifikation müssen Benutzeragenten PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe aufweisen, und alle anderen nicht animierten Bilddateiformate unterstützen, die sie für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen ebenfalls weit verbreitet das .cur-Dateiformat.

Die Spezifikation gibt weiterhin an, dass Benutzeragenten sollten auch SVG v1.1-Dateien im sicheren animierten Modus unterstützen, die eine natürliche Größe aufweisen, zusammen mit allen anderen animierten Bilddateiformaten, die sie für Bilder in anderen Eigenschaften unterstützen. Benutzeragenten können sowohl statische als auch animierte SVG-Bilder unterstützen, die keine natürliche Größe aufweisen.

iPadOS unterstützt Zeigegeräte wie Trackpads und Mäuse. Standardmäßig wird der iPad-Cursor als Kreis angezeigt, und der einzige unterstützte Wert, der das Erscheinungsbild des Zeigers ändert, ist text.

Cursor-Änderungen, die sich mit Symbolleistenbereichen überschneiden, werden häufig blockiert, um Spoofing zu vermeiden.

• pointer-events
• <url>-Typ
• SVG-cursor-Attribut