cursor CSS property

Probieren Sie es aus

cursor: pointer;

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

<section class="default-example container" id="default-example">
  <div id="example-element">
    Move over this element to see the cursor style.
  </div>
</section>

#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

Syntax

/* Keyword values */
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 Eigenschaft cursor wird durch null oder mehr durch Kommas getrennte <url>-Werte angegeben, auf die ein einzelner obligatorischer Schlüsselwortwert folgt. Jeder <url>-Wert sollte auf eine Bilddatei verweisen. Der Browser versucht, das erste angegebene Bild zu laden. Gelingt dies nicht, versucht er es mit dem nächsten Bild und verwendet schließlich den Schlüsselwortwert, wenn kein Bild geladen werden konnte oder keines angegeben wurde.

Auf jeden <url>-Wert kann optional ein Paar durch Leerzeichen getrennter Zahlen folgen. Diese legen die <x>- und <y>-Koordinaten des Hotspots des Mauszeigers relativ zur oberen linken Ecke des Bildes fest.

Werte

<url> Optional

Ein url()-Wert oder eine durch Kommas getrennte Liste url(), url(), …, die auf Bilddateien verweist. Mehrere <url>-Werte können als Ausweichmöglichkeiten angegeben werden, falls bestimmte Bildformate für Mauszeiger nicht unterstützt werden. Am Ende der Ausweichliste muss ein Wert stehen, der keine URL ist: einer der Schlüsselwortwerte.

<x>, <y> Optional

Optionale x- und y-Koordinaten für den Hotspot des Mauszeigers, also die genaue Stelle innerhalb des Mauszeigers, auf die gezeigt wird.

Die Zahlen werden in Bildpixeln angegeben. Sie beziehen sich auf die obere linke Ecke des Bildes, die 0 0 entspricht, und werden auf die Grenzen des Mauszeigerbildes beschränkt. Wenn diese Werte nicht angegeben werden, können sie aus der Datei selbst ausgelesen werden. Andernfalls wird standardmäßig die obere linke Ecke des Bildes verwendet.

keyword

Ein Schlüsselwortwert muss angegeben werden. Er legt entweder den zu verwendenden Mauszeigertyp fest oder den Ersatzmauszeiger, falls alle angegebenen Symbole nicht geladen werden können.

Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Mit Ausnahme von none, das bedeutet, dass kein Mauszeiger angezeigt wird, zeigt jeweils ein Bild, wie die Mauszeiger früher dargestellt wurden. Wenn Sie den Mauszeiger über die Tabellenzeilen bewegen, sehen Sie, wie die verschiedenen Schlüsselwortwerte heute in Ihrem Browser wirken.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Der User Agent bestimmt anhand des aktuellen Kontexts, welcher Mauszeiger angezeigt wird. Beispielsweise entspricht er über Text dem Wert text.
	default		Der plattformabhängige Standardmauszeiger. Üblicherweise ein Pfeil.
	none		Es wird kein Mauszeiger dargestellt.
Links und Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfeinformationen sind verfügbar.
	pointer		Der Mauszeiger zeigt einen Link an. Üblicherweise wird eine zeigende Hand dargestellt.
	progress		Das Programm ist im Hintergrund beschäftigt, aber Nutzer können weiterhin mit der Benutzeroberfläche interagieren (im Gegensatz zu wait).
	wait		Das Programm ist beschäftigt und Nutzer können nicht mit der Benutzeroberfläche interagieren (im Gegensatz zu progress). Manchmal wird eine Sanduhr oder eine Uhr dargestellt.
Auswahl	cell		Die Tabellenzelle oder eine Gruppe von Zellen kann ausgewählt werden.
	crosshair		Fadenkreuz-Mauszeiger, der häufig eine Auswahl in einer Bitmap kennzeichnet.
	text		Der Text kann ausgewählt werden. Üblicherweise in Form eines senkrechten I-förmigen Balkens.
	vertical-text		Der vertikale Text kann ausgewählt werden. Üblicherweise in Form eines waagerechten I-förmigen Balkens.
Drag-and-Drop	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 an der aktuellen Position nicht abgelegt werden. Firefox-Bug 275173: Unter Windows und macOS entspricht no-drop dem Wert not-allowed.
	not-allowed		Die angeforderte Aktion wird nicht ausgeführt.
	grab		Etwas kann gegriffen und durch Ziehen verschoben werden.
	grabbing		Etwas wird gerade gegriffen und durch Ziehen verschoben.
Größenänderung und Scrollen	all-scroll		Etwas kann in jede Richtung gescrollt oder verschoben werden. Firefox-Bug 275174: Unter Windows entspricht all-scroll dem Wert move.
	col-resize		Die Größe des Elements oder der Spalte kann horizontal geändert werden. Häufig als nach links und rechts zeigende Pfeile dargestellt, die durch einen senkrechten Balken getrennt sind.
	row-resize		Die Größe des Elements oder der Zeile kann vertikal geändert werden. Häufig als nach oben und unten zeigende Pfeile dargestellt, die durch einen waagerechten Balken getrennt sind.
	n-resize		Eine Kante soll verschoben werden. Der Mauszeiger se-resize wird beispielsweise verwendet, wenn die Bewegung an der südöstlichen Ecke des Rahmens beginnt. In manchen Umgebungen wird stattdessen ein entsprechender bidirektionaler Mauszeiger zur Größenänderung angezeigt. Beispielsweise entsprechen n-resize und s-resize dem Wert ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Bidirektionaler Mauszeiger zur Größenänderung.
	ns-resize
	nesw-resize
	nwse-resize
Zoomen	zoom-in		Etwas kann vergrößert oder verkleinert dargestellt werden.
	zoom-out

Hinweise zur Verwendung

Größenbeschränkungen für Symbole

Die Spezifikation begrenzt die Größe von cursor-Bildern nicht, User Agents beschränken sie jedoch üblicherweise, um möglichen Missbrauch zu verhindern. Firefox und Chromium begrenzen Mauszeigerbilder beispielsweise standardmäßig auf 128 × 128 Pixel. Es wird jedoch empfohlen, ihre Größe auf 32 × 32 Pixel zu beschränken. Änderungen des Mauszeigers durch Bilder, die größer als die vom User Agent maximal unterstützte Größe sind, werden im Allgemeinen einfach ignoriert.

Unterstützte Bilddateiformate

Die Spezifikation verlangt von User Agents, PNG-Dateien, SVG-v1.1-Dateien im sicheren statischen Modus mit einer natürlichen Größe sowie alle anderen nicht animierten Bilddateiformate zu unterstützen, die sie auch für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen außerdem weitgehend das Dateiformat .cur.

Darüber hinaus sieht die Spezifikation vor, dass User Agents auch SVG-v1.1-Dateien im sicheren animierten Modus mit einer natürlichen Größe sowie alle anderen animierten Bilddateiformate unterstützen sollten, die sie auch für Bilder in anderen Eigenschaften unterstützen. User Agents dürfen sowohl statische als auch animierte SVG-Bilder ohne natürliche Größe unterstützen.

iPadOS

iPadOS unterstützt Zeigegeräte wie Trackpads und Mäuse. Standardmäßig wird der iPad-Mauszeiger als Kreis dargestellt. Der einzige unterstützte Wert, der sein Aussehen verändert, ist text.

Weitere Hinweise

Änderungen des Mauszeigers, die Bereiche von Symbolleisten betreffen, werden üblicherweise blockiert, um Täuschungsversuche zu verhindern.

Formale Definition

Formale Syntax

cursor = 
  [ <cursor-image> , ]* <cursor-predefined>  

<cursor-image> = 
  [ <url> | <url-set> ] <number>{2}?  

<cursor-predefined> = 
  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       

Beispiele

Mauszeigertypen festlegen

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

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