cursor

Die cursor-Eigenschaft von CSS legt den Mauszeiger fest, der angezeigt wird, wenn der Mauszeiger über ein Element geführt wird.

Die Cursor-Einstellung sollte Benutzer über die Mausoperationen informieren, die an der aktuellen Position ausgeführt werden können, einschließlich: Textauswahl, Hilfe oder Kontextmenüs aktivieren, Inhalte kopieren, Tabellen neu dimensionieren usw. Sie können entweder den Typ des Cursors mit einem Schlüsselwort angeben oder ein bestimmtes Symbol laden, das verwendet werden soll (mit optionalen Fallback-Bildern und einem obligatorischen Schlüsselwort als endgültigem Fallback).

Probieren Sie es aus

Syntax

css
/* 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, die durch Kommata getrennt werden, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jede <url> sollte auf eine Bilddatei verweisen. Der Browser wird versuchen, das erste angegebene Bild zu laden und fällt auf das nächste zurück, wenn es nicht geladen werden kann, und verwendet den Schlüsselwortwert als Fallback, wenn keine Bilder geladen werden konnten (oder keine angegeben wurden).

Jede <url> kann optional von einem Paar 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 Kommata getrennte Liste url(), url(), …, die auf eine Bilddatei verweisen. Mehr als eine <url> kann als Fallback bereitgestellt werden, falls einige Cursorbildtypen nicht unterstützt werden. Ein Nicht-URL-Fallback (einer oder mehrere der Schlüsselwert-Bedingungen) 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 angezeigt 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 eingegrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und andernfalls standardmäßig auf die obere linke Ecke des Bildes festgelegt werden.

keyword

Ein Schlüsselwortwert muss angegeben werden und zeigt entweder den zu verwendenden Cursor-Typ an oder den Fallback-Cursor, der verwendet werden soll, 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 Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können Ihre Maus über die Tabellenzeilen bewegen, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser zu sehen.

Kategorie Schlüsselwort Beispiel Beschreibung
Allgemein auto Der UA wird den anzuzeigenden Cursor basierend auf dem aktuellen Kontext bestimmen. Z.B. äquivalent zu text beim Schweben über Text.
default breiter Pfeil, der nach oben und links zeigt Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.
none Es wird kein Cursor gerendert.
Links & Status context-menu breiter Pfeil zeigt nach oben und links, der ein Menü-Symbol leicht verdeckt Ein Kontextmenü ist verfügbar.
help breiter Pfeil zeigt nach oben und links neben einem Fragezeichen Hilfsinformationen sind verfügbar.
pointer rechte Hand mit einem nach oben gerichteten Zeigefinger 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 noch mit der Schnittstelle interagieren (im Gegensatz zu wait).
wait Sanduhr Das Programm ist beschäftigt und der Benutzer kann nicht mit der Schnittstelle interagieren (im Gegensatz zu progress). Manchmal ein Bild einer Sanduhr oder einer Uhr.
Auswahl cell breites Plussymbol Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
crosshair Plussymbol bestehend aus zwei dünnen Linien. Kreuzcursor, oft verwendet, um eine Auswahl in einem Bitmap anzuzeigen.
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.
Ziehen & Ablegen alias breiter Pfeil zeigt nach oben und links und verdeckt teilweise ein kleineres Ordnersymbol mit einem gebogenen Pfeil, der nach oben und rechts zeigt Ein Alias oder eine Verknüpfung soll erstellt werden.
copy breiter Pfeil zeigt nach oben und 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 Zeigersymbol und ein Nicht-erlaubt-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 einem durchgehenden Strich ist Die angeforderte Aktion wird nicht ausgeführt.
grab vollständig geöffnetes Handsymbol Etwas kann gegriffen (zum Bewegen gezogen) werden.
grabbing geschlossene Hand-Symbol, mit dem Handrücken Etwas wird gegriffen (zum Bewegen gezogen).
Größe ändern & 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/die Spalte kann horizontal geändert werden. Oft als Pfeile dargestellt, die nach links und rechts zeigen, getrennt durch eine vertikale Linie.
row-resize zwei schmale parallele horizontale Linien mit einem kleinen Pfeil, der nach oben und einem weiteren, der nach unten zeigt Das Element/die Zeile kann vertikal geändert werden. Oft als Pfeile dargestellt, die nach oben und unten zeigen, getrennt durch eine horizontale Linie.
n-resize dünner langer Pfeil, der nach oben zeigt Eine Kante soll verschoben 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 Resize-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 Resize-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
Zoom zoom-in Lupe mit einem Pluszeichen

Etwas kann hineingezoomt (vergrößert) oder herausgezoomt werden.

zoom-out Lupe mit einem Minuszeichen

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypdiskret

Formale Syntax

cursor = 
[ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ 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 ]

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Anwendungshinweise

Begrenzungen der Symbolgröße

Obwohl die Spezifikation die Bildgröße von cursor nicht einschränkt, beschränken Benutzeragenten sie in der Regel, um potenziellen Missbrauch zu vermeiden. Zum Beispiel sind in Firefox und Chromium Cursor-Bilder standardmäßig auf 128x128 Pixel beschränkt, es wird jedoch empfohlen, die Cursorbildgröße auf 32x32 Pixel zu beschränken. Cursor-Änderungen, die Bilder verwenden, die größer sind als die maximal unterstützte Größe des Benutzeragenten, werden im Allgemeinen einfach ignoriert.

Unterstützte Bilddateiformate

Benutzeragenten sind gemäß 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 für Bilder in anderen Eigenschaften unterstützen, zu unterstützen. Desktop-Browser unterstützen auch allgemein das .cur-Dateiformat.

Die Spezifikation gibt weiter an, dass Benutzeragenten sollten auch SVG v1.1-Dateien in sicherem animiertem Modus, die eine natürliche Größe enthalten, sowie alle anderen animierten Bilderdateiformate unterstützen, die sie für Bilder in anderen Eigenschaften unterstützen. Benutzeragenten dürfen 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.

Weitere Hinweise

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

Beispiele

Festlegen von Kurznachrichtentypen

css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# cursor

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cursor
alias
all-scroll
auto
cell
col-resize
context-menu
copy
crosshair
default
e-resize
ew-resize
Grab cursors (grab and grabbing)
grabbing
help
move
n-resize
ne-resize
nesw-resize
no-drop
none
not-allowed
ns-resize
nw-resize
nwse-resize
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
url()
url() positioning syntax
vertical-text
w-resize
wait
zoom-in
zoom-out

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch