cursor

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 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, getrennt durch Kommas, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert angegeben. Jede <url> sollte auf eine Bilddatei verweisen. Der Browser versucht das erste angegebene Bild zu laden und wechselt zum nächsten, wenn es nicht geladen werden kann, und verwendet den Schlüsselwortwert, wenn keine Bilder geladen werden konnten (oder wenn keine angegeben wurden).

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

Werte

<url> Optional

Ein url() oder eine durch Kommas getrennte Liste url(), url(), …, die auf eine Bilddatei verweist. Es können mehr als ein <url> als Fallbacks angegeben werden, falls einige Cursor-Bildtypen nicht unterstützt werden. Ein Nicht-URL-Fallback (eines oder mehrere der Schlüsselwerte) 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 angedeutet wird.

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

keyword

Ein Schlüsselwert muss angegeben werden, der 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 Tabelle unten aufgelistet. Außer bei none, was bedeutet, dass kein Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher dargestellt wurden. Sie können den Mauszeiger über die Tabellenzeilen bewegen, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte auf Ihrem heutigen Browser zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Die Benutzeroberfläche wird den darzustellenden Cursor basierend auf dem aktuellen Kontext bestimmen. Z.B. äquivalent zu text, wenn über Text gefahren wird.
	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		Hilfsinformationen sind 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 noch 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		Kreuzcursor, häufig verwendet um eine Auswahl in einem Bitmap anzugeben.
	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 liegenden 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 an der aktuellen Stelle nicht abgelegt werden. Firefox-Bug 275173: Unter Windows und macOS ist no-drop das gleiche wie not-allowed.
	not-allowed		Die angeforderte Aktion wird nicht durchgeführt.
	grab		Etwas kann gegriffen (zum Verschieben gezogen) werden.
	grabbing		Etwas wird gegriffen (zum Verschieben gezogen).
Größenänderung & Scrollen	all-scroll		Etwas kann in jede Richtung gescrollt (verschoben) werden. Firefox-Bug 275174: Unter Windows ist all-scroll das gleiche wie move.
	col-resize		Das Element/Spalte kann horizontal geändert werden. Oftmals als Pfeile dargestellt, die nach links und rechts zeigen, mit einem vertikalen Balken, der sie trennt.
	row-resize		Das Element/Zeile kann vertikal geändert werden. Oftmals als Pfeile dargestellt, die nach oben und unten zeigen, mit einem horizontalen Balken, der sie trennt.
	n-resize		Eine Kante soll bewegt werden. Zum Beispiel wird der se-resize Cursor verwendet, wenn die Bewegung von der south-east Ecke des Kästchens startet. In einigen Umgebungen wird ein äquivalenter bidirektionaler Größenänderungscursor angezeigt. Zum Beispiel sind n-resize und s-resize das gleiche wie ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Bidirektionaler Größenänderungscursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoom	zoom-in		Etwas kann ein- oder ausgezoomt (vergrößert) 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       

Nutzungsnotizen

Begrenzte Icon-Größen

Obwohl die Spezifikation die cursor-Bildgröße nicht begrenzt, beschränken User-Agenten sie häufig, um potenziellen Missbrauch zu vermeiden. Zum Beispiel sind auf Firefox und Chromium Cursor-Bilder standardmäßig auf 128x128 Pixel begrenzt, aber es wird empfohlen, die Cursor-Bildgröße auf 32x32 Pixel zu beschränken. Cursor-Änderungen mit Bildern, die größer sind als die vom User-Agenten maximal unterstützte Größe, werden im Allgemeinen einfach ignoriert.

Unterstützte Bilddateiformate

Benutzer-Agenten müssen gemäß der Spezifikation PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate unterstützen, die sie für Bilder in anderen Eigenschaften in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen auch weitgehend das .cur-Dateiformat.

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

iPadOS

iPadOS unterstützt Zeigergerä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.

Andere Hinweise

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

Beispiele

Cursor-Typen einstellen

.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