cursor

Probieren Sie es aus

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<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 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 Kommata, gefolgt von einem einzigen 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, falls es nicht geladen werden kann, und schließlich auf den Schlüsselwortwert, wenn keine Bilder geladen werden konnten (oder wenn keine angegeben wurden).

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

Werte

<url> Optional

Eine url() oder eine kommagetrennte Liste url(), url(), …, die auf eine Bilddatei verweist. Mehr als ein <url> kann als Fallback 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 Hotspot des Mauszeigers angeben; die genaue Position innerhalb des Cursors, auf die gezeigt wird.

Die Zahlen sind in Einheiten von Bildpixeln. Sie sind relativ zur oberen linken Ecke des Bildes, die 0 0 entspricht, und werden innerhalb der Grenzen des Cursorbildes eingeklammert. Wenn diese Werte nicht angegeben sind, können sie der Datei selbst entnommen werden und werden sonst auf die obere linke Ecke des Bildes standardmäßig festgelegt.

keyword

Ein Schlüsselwortwert muss angegeben werden, der entweder den zu verwendenden Cursortyp 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 unten stehenden Tabelle aufgeführt. Außer none, was bedeutet, dass kein Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können mit der Maus über die Tabellenzeilen fahren, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser heute zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Der User Agent bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z.B. entspricht text beim Überfahren von Text.
	default		Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.
	none		Es wird kein Cursor gerendert.
Links & Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfeinformationen sind verfügbar.
	pointer		Der Cursor ist ein Zeiger, der einen Link anzeigt. Typischerweise ein Bild einer zeigenden Hand.
	progress		Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Schnittstelle interagieren (im Gegensatz zu wait).
	wait		Das Programm ist beschäftigt, und der Benutzer kann nicht mit der Schnittstelle interagieren (im Gegensatz zu progress). Manchmal ein Stundenglas oder eine Uhr.
Auswahl	cell		Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
	crosshair		Kreuzcursor, häufig zur Indikation der Auswahl in einer Bitmap verwendet.
	text		Der Text kann ausgewählt werden. Typischerweise die Form eines I-Balkens.
	vertical-text		Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitwärts gerichteten I-Balkens.
Drag & 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 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 gegriffen (zum Verschieben gezogen) werden.
	grabbing		Etwas wird gerade gegriffen (zum Verschieben gezogen).
Größenänderung & Scrollen	all-scroll		Etwas kann in jeder Richtung gescrollt (verschoben) werden. Firefox-Fehler 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize		Das Element/Spalte kann horizontal in der Größe geändert werden. Oft werden Pfeile gezeigt, die nach links und rechts zeigen, mit einer vertikalen Linie, die sie trennt.
	row-resize		Das Element/Reihe kann vertikal in der Größe geändert werden. Oft werden Pfeile gezeigt, die nach oben und unten zeigen, mit einer horizontalen Linie, die sie trennt.
	n-resize		Ein Rand soll bewegt werden. Zum Beispiel wird der se-resize Cursor verwendet, wenn die Bewegung von der süd-östlichen Ecke 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
Vergrößerung	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       

Anwendungsnotizen

Beschränkungen der Symbolgröße

Obwohl die Spezifikation die Größe des cursor Bildes nicht einschränkt, begrenzen Benutzeragenten sie häufig, um möglichen Missbrauch zu vermeiden. Beispielsweise sind in Firefox und Chromium Cursorbilder standardmäßig auf 128x128 Pixel beschränkt, aber es wird empfohlen, die Größe des Cursorbildes auf 32x32 Pixel zu begrenzen. Cursoränderungen mit Bildern, die größer sind als die von Benutzernagenten maximal unterstützte Größe, werden normalerweise einfach ignoriert.

Unterstützte Bilddateiformate

Benutzeragenten sind laut Spezifikation dazu verpflichtet, PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate zu unterstützen, die sie auch für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen auch allgemein 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 enthalten, sowie alle anderen animierten Bilddateiformate, die sie auch 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 enthalten.

iPadOS

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 ändern kann, ist text.

Weitere Hinweise

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

Beispiele

Festlegen von Cursortypen

.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
• <url> Typ
• SVG cursor Attribut