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 als null oder mehr durch Kommas getrennte <url>-Werte angegeben, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jede <url> sollte auf eine Bilddatei verweisen. Der Browser versucht, das erste angegebene Bild zu laden, verwendet bei einem Fehlschlag das nächste und greift auf den Schlüsselwortwert zurück, wenn keine Bilder geladen werden konnten (oder keine angegeben wurden).

Auf jede <url> kann optional ein durch Leerzeichen getrenntes Zahlenpaar folgen, das die Koordinaten <x> und <y> des Hotspots des Mauszeigers relativ zur oberen linken Ecke des Bildes festlegt.

Werte

<url> Optional

Eine url() oder eine durch Kommas getrennte Liste url(), url(), …, die auf eine Bilddatei verweist. Es können mehrere <url> als Fallbacks angegeben werden, falls einige Arten von Mauszeigerbildern nicht unterstützt werden. Ein Fallback ohne URL (einer oder mehrere der Schlüsselwortwerte) muss am Ende der Fallback-Liste stehen.

<x>, <y> Optional

Optionale x- und y-Koordinaten, die den Hotspot des Mauszeigers angeben; die genaue Position innerhalb des Mauszeigers, auf die gezeigt wird.

Die Zahlen werden in Einheiten von Bildpixeln angegeben. Sie beziehen sich auf die obere linke Ecke des Bildes, die 0 0 entspricht, und werden innerhalb der Grenzen des Mauszeigerbildes begrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden; andernfalls wird standardmäßig die obere linke Ecke des Bildes verwendet.

keyword

Ein Schlüsselwortwert muss angegeben werden. Er gibt entweder den zu verwendenden Typ des Mauszeigers oder den Fallback-Mauszeiger an, der verwendet wird, wenn 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, was bedeutet, dass kein Mauszeiger angezeigt wird, zeigt ein Bild, wie die Mauszeiger früher dargestellt wurden. Sie können mit der Maus über die Tabellenzeilen fahren, um die Wirkung der verschiedenen Mauszeiger-Schlüsselwortwerte in Ihrem heutigen Browser zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Der UA bestimmt anhand des aktuellen Kontexts, welcher Mauszeiger angezeigt wird. Beispielsweise entspricht er beim Überfahren von Text text.
	default		Der plattformabhängige Standardmauszeiger. Typischerweise ein Pfeil.
	none		Es wird kein Mauszeiger dargestellt.
Links & Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfeinformationen sind verfügbar.
	pointer		Der Mauszeiger ist ein Zeiger, der einen Link kennzeichnet. 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 wird ein Bild einer Sanduhr oder einer Uhr angezeigt.
Auswahl	cell		Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
	crosshair		Fadenkreuz-Mauszeiger, oft zur Kennzeichnung einer Auswahl in einer Bitmap verwendet.
	text		Der Text kann ausgewählt werden. Typischerweise in Form eines I-Balkens.
	vertical-text		Der vertikale Text kann ausgewählt werden. Typischerweise in Form eines seitlich liegenden I-Balkens.
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 an der aktuellen Position nicht abgelegt werden. Firefox-Bug 275173: Unter Windows und macOS ist no-drop gleich not-allowed.
	not-allowed		Die angeforderte Aktion wird nicht ausgeführt.
	grab		Etwas kann gegriffen werden (zum Verschieben ziehen).
	grabbing		Etwas wird gegriffen (zum Verschieben ziehen).
Größenänderung & Scrollen	all-scroll		Etwas kann in jede Richtung gescrollt werden (verschoben). Firefox-Bug 275174: Unter Windows ist all-scroll gleich move.
	col-resize		Die Größe des Elements/der Spalte kann horizontal geändert werden. Häufig als nach links und rechts zeigende Pfeile mit einem sie trennenden vertikalen Balken dargestellt.
	row-resize		Die Größe des Elements/der Zeile kann vertikal geändert werden. Häufig als nach oben und unten zeigende Pfeile mit einem sie trennenden horizontalen Balken dargestellt.
	n-resize		Eine Kante soll verschoben werden. Beispielsweise wird der Mauszeiger se-resize verwendet, wenn die Bewegung an der südöstlichen Ecke des Felds beginnt. In einigen Umgebungen wird ein gleichwertiger bidirektionaler Mauszeiger zur Größenänderung angezeigt. Beispielsweise sind n-resize und s-resize gleich 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 werden.
	zoom-out

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       

Hinweise zur Verwendung

Begrenzungen der Symbolgröße

Obwohl die Spezifikation die Bildgröße für cursor nicht begrenzt, beschränken User Agents diese üblicherweise, um potenziellen Missbrauch zu vermeiden. Beispielsweise sind Mauszeigerbilder in Firefox und Chromium standardmäßig auf 128x128 Pixel begrenzt, es wird jedoch empfohlen, die Mauszeigerbildgröße auf 32x32 Pixel zu begrenzen. Änderungen des Mauszeigers mithilfe von Bildern, die größer als die vom User Agent maximal unterstützte Größe sind, werden im Allgemeinen einfach ignoriert.

Unterstützte Bilddateiformate

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

Die Spezifikation weist außerdem darauf hin, 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 für Bilder in anderen Eigenschaften unterstützen. User Agents können sowohl statische als auch animierte SVG-Bilder unterstützen, die keine natürliche Größe enthalten.

iPadOS

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

Weitere Hinweise

Änderungen des Mauszeigers, die sich mit Bereichen der Symbolleiste überschneiden, werden üblicherweise blockiert, um Spoofing zu vermeiden.

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