cursor CSS property

Die cursor-Eigenschaft von CSS legt den Mauszeiger fest, der angezeigt wird, wenn der Mauszeiger über einem Element schwebt.

Die Einstellung des Cursors sollte den Benutzern über die Mausoperationen informieren, die an der aktuellen Position durchgeführt werden können, einschließlich: Textauswahl, Aktivierung von Hilfe- oder Kontextmenüs, Kopieren von Inhalten, Größenänderung von Tabellen usw. Sie können entweder den Typ des Cursors mit einem Schlüsselwort angeben oder ein spezifisches Symbol laden, das verwendet werden soll (mit optionalen alternativen Bildern und einem obligatorischen Schlüsselwort als endgültigem Fallback).

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 Kommata, gefolgt von einem einzigen 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 dies nicht möglich ist, und schließlich wird der Schlüsselwortwert verwendet, falls keine Bilder geladen werden konnten (oder keine angegeben wurden).

Jede <url> kann optional von einem Paar aus leerzeichengetrennten 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. Mehr als ein <url> kann als Fallback angegeben werden, falls einige Cursor-Bildtypen nicht unterstützt werden. Ein nicht-URL-Fallback (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 Cursors angeben; die genaue Position innerhalb des Cursors, auf die gezeigt wird.

Die Zahlen sind in Einheiten von Bildpunkten angegeben. Sie sind relativ zur oberen linken Ecke des Bildes, was 0 0 entspricht, und sind innerhalb der Grenzen des Cursors dargestellt. Falls diese Werte nicht angegeben sind, können sie aus der Datei selbst ausgelesen werden und werden andernfalls standardmäßig auf die obere linke Ecke des Bildes gesetzt.

keyword

Ein Schlüsselwortwert muss angegeben werden, der entweder den Typ des zu verwendenden Cursors oder den Fallback-Cursor angibt, der verwendet werden soll, falls alle angegebenen Symbole nicht geladen werden können.

Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgelistet. Abgesehen von 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 die Wirkung der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser heute zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto	Der UA bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z.B. entspricht text, wenn über Text schwebt.
	default	Breiter Pfeil zeigt nach oben links	Der plattformabhängige Standard-Cursor. Typischerweise ein Pfeil.
	none	Kein Cursor wird gerendert.
Links & Status	context-menu	Breiter Pfeil zeigt nach oben links und verdeckt ein wenig ein Menü-Symbol	Ein Kontextmenü ist verfügbar.
	help	Breiter Pfeil zeigt nach oben links neben einem Fragezeichen	Hilfsinformationen sind verfügbar.
	pointer	Rechte Hand mit einem Zeigefinger, der nach oben zeigt	Der Cursor ist ein Zeiger, der auf einen Link hinweist. Typischerweise ein Bild einer zeigenden Hand.
	progress	Breiter Pfeil und Sanduhr	Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Oberfläche interagieren (im Gegensatz zu wait).
	wait	Sanduhr	Das Programm ist beschäftigt, und der Benutzer kann nicht mit der Oberfläche interagieren (im Gegensatz zu progress). Manchmal ein Bild von einer Sanduhr oder einer Uhr.
Auswahl	cell	Breites Pluszeichen	Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
	crosshair	Pluszeichen, bestehend aus zwei dünnen Linien.	Kreuz-Cursor, oft verwendet, um eine Auswahl in einem Bitmap anzuzeigen.
	text	Vertikaler I-Balken	Der Text kann ausgewählt werden. Typischerweise die Form eines I-Balken.
	vertical-text	Horizontaler I-Balken	Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitlichen I-Balken.
Ziehen & Ablegen	alias	Breiter Pfeil zeigt nach oben links und verdeckt teilweise ein kleineres Ordnersymbol mit einem gebogenen Pfeil, der nach oben rechts zeigt	Ein Alias oder eine Verknüpfung soll erstellt werden.
	copy	Breiter Pfeil zeigt nach oben links und verdeckt teilweise ein kleineres Ordnersymbol mit einem Pluszeichen	Etwas soll kopiert werden.
	move	Pluszeichen aus zwei dünnen Linien. Die vier Punkte sind kleine Pfeile, die nach außen zeigen	Etwas soll bewegt werden.
	no-drop	Zeiger-Symbol und ein 'nicht erlaubt'-Symbol	Ein Element darf an der aktuellen Position nicht ablegt werden. Firefox-Fehler 275173: Unter Windows und macOS ist no-drop dasselbe wie not-allowed.
	not-allowed	Nicht erlaubtes Symbol, das ein Kreis mit einem durchlaufenden Strich ist	Die angeforderte Aktion wird nicht ausgeführt.
	grab	Vollständig geöffnetes Hand-Symbol	Etwas kann ergriffen werden (gezogen, um bewegt zu werden).
	grabbing	Geschlossenes Hand-Symbol, Rückseite der Hand	Etwas wird gerade ergriffen (gezogen, um bewegt zu werden).
Größenänderung & Bildlauf	all-scroll	Symbol eines mittleren Punktes mit vier Dreiecken darum herum.	Etwas kann in eine beliebige Richtung gescrollt werden (verschoben). Firefox-Fehler 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize	col-resize.gif	Das Element/Die Spalte kann horizontal in der Größe verändert werden. Oft als Pfeile gerendert, die nach links und rechts zeigen, mit einem vertikalen Balken, der sie trennt.
	row-resize	Zwei schmale parallele horizontale Linien mit einem kleinen Pfeil, der nach oben zeigt, und einem weiteren, der nach unten zeigt	Das Element/Die Zeile kann vertikal in der Größe verändert werden. Oft als Pfeile gerendert, die nach oben und unten zeigen, mit einem horizontalen Balken, der sie trennt.
	n-resize	Dünner langer Pfeil, der nach oben zeigt	Eine Kante soll bewegt werden. Zum Beispiel wird der se-resize Cursor verwendet, wenn die Bewegung von der südöstlichen Ecke des Rahmens aus beginnt. In einigen Umgebungen wird ein äquivalenter bidirektionaler Größenänderungscursor 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änderungscursor.
	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
Zoomen	zoom-in	Lupe mit einem Pluszeichen	Etwas kann herein- oder herausgezoomt (vergrößert) 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 

Anwendungshinweise

Größenbeschränkungen für Symbole

Obwohl die Spezifikation keine Begrenzung der Bildgröße für den cursor-Bildgröße festlegt, beschränken User Agents diese häufig, um potenziellen Missbrauch zu verhindern. Zum Beispiel werden in Firefox und Chromium Cursorsymbole standardmäßig auf 128x128 Pixel begrenzt, aber es wird empfohlen, die Größe der Cursorsymbole auf 32x32 Pixel zu begrenzen. Cursoränderungen mit größeren Bildern als die maximal unterstützte Größe des User-Agents werden in der Regel einfach ignoriert.

Unterstützte Bilddateiformate

User Agents sind laut der Spezifikation verpflichtet, PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate, die sie auch für Bilder in anderen Eigenschaften unterstützen, zu unterstützen. Desktop-Browser unterstützen auch weitgehend das .cur-Dateiformat.

Die Spezifikation weist außerdem darauf hin, dass User Agents sollten 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. User Agents könnten 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 ändert, ist text.

Sonstige Hinweise

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

Beispiele

Einstellungen 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