cursor

Die cursor CSS Eigenschaft legt den Mauszeiger fest, der angezeigt werden soll, wenn sich der Mauszeiger über einem Element befindet.

Die Cursor-Einstellung sollte die Benutzer über die Mausaktionen informieren, die an der aktuellen Position ausgeführt werden können, einschließlich: Textauswahl, Aktivieren von Hilfe- oder Kontextmenüs, Kopieren von Inhalten, Ändern der Größe von Tabellen usw. Sie können entweder den Typ des Cursors mit einem Schlüsselwort angeben oder ein spezifisches Symbol laden (mit optionalen Fallback-Bildern und einem obligatorischen Schlüsselwort als letztendlichem Fallback).

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	breiter Pfeil, der nach oben und nach links zeigt	Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.
	none	Es wird kein Cursor gerendert.
Links & Status	context-menu	breiter Pfeil, der nach oben und nach links zeigt und ein Menüsymbol leicht verdeckt	Ein Kontextmenü ist verfügbar.
	help	breiter Pfeil, der nach oben und nach links neben einem Fragezeichen zeigt	Hilfeinformationen sind verfügbar.
	pointer	rechte Hand mit einem Zeigefinger, der nach oben zeigt	Der Cursor ist ein Zeiger, der einen Link anzeigt. Typischerweise ein Bild einer zeigenden Hand.
	progress	breiter Pfeil und Stundenglas	Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Schnittstelle interagieren (im Gegensatz zu wait).
	wait	Stundenglas	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	breites Plus-Symbol	Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
	crosshair	Plus-Symbol aus zwei dünnen Linien.	Kreuzcursor, häufig zur Indikation der Auswahl in einer Bitmap verwendet.
	text	vertikaler I-Balken	Der Text kann ausgewählt werden. Typischerweise die Form eines I-Balkens.
	vertical-text	horizontaler I-Balken	Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitwärts gerichteten I-Balkens.
Drag & Drop	alias	breiter Pfeil, der nach oben und nach links zeigt, teilweise ein kleineres Ordnersymbol mit einem gekrümmten Pfeil, der nach oben und nach rechts zeigt, verdeckend	Ein Alias oder eine Verknüpfung soll erstellt werden.
	copy	breiter Pfeil, der nach oben und nach links zeigt, teilweise ein kleineres Ordnersymbol mit einem Pluszeichen verdeckend	Etwas soll kopiert werden.
	move	Pluszeichen aus zwei dünnen Linien. Die vier Punkte sind kleine Pfeile, die nach außen zeigen	Etwas soll verschoben werden.
	no-drop	Zeiger-Symbol und ein nicht erlaubtes Symbol	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	Nicht-erlaubt-Symbol, das ein Kreis mit einer durchgezogen Linie ist	Die angeforderte Aktion wird nicht ausgeführt.
	grab	vollständig geöffnete Handsymbol	Etwas kann gegriffen (zum Verschieben gezogen) werden.
	grabbing	geschlossenes Handsymbol, Rückseite der Hand	Etwas wird gerade gegriffen (zum Verschieben gezogen).
Größenänderung & Scrollen	all-scroll	Symbol eines mittleren Punktes mit vier Dreiecken darum.	Etwas kann in jeder Richtung gescrollt (verschoben) werden. Firefox-Fehler 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize	col-resize.gif	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	zwei schmale parallele horizontale Linien mit einem kleinen Pfeil, der nach oben und einem, der nach unten zeigt	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	dünner langer Pfeil, der nach oben zeigt	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	dünner langer Pfeil, der nach rechts zeigt
	s-resize	dünner langer Pfeil, der nach unten zeigt
	w-resize	dünner langer Pfeil, der nach links zeigt
	ne-resize	dünner langer Pfeil, der nach oben rechts zeigt
	nw-resize	dünner langer Pfeil, der nach oben links zeigt
	se-resize	dünner langer Pfeil, der nach unten rechts zeigt
	sw-resize	dünner langer Pfeil, der nach unten links zeigt
	ew-resize	dünner langer Pfeil, der nach links und rechts zeigt	Bidirektionaler Größenänderungs-Cursor.
	ns-resize	dünner langer Pfeil, der nach oben und unten zeigt
	nesw-resize	dünner langer Pfeil, der sowohl nach oben rechts als auch nach unten links zeigt
	nwse-resize	dünner langer Pfeil, der sowohl nach oben links als auch nach unten rechts zeigt
Vergrößerung	zoom-in	Lupe mit einem Pluszeichen	Etwas kann vergrößert oder verkleinert werden.
	zoom-out	Lupe mit einem Minuszeichen

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