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).
/* 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.
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.
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.
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
Der plattformabhängige Standardcursor. 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 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 Bild einer Sanduhr oder einer Uhr.
Auswahl
cell
Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.
crosshair
Kreuzcursor, oft verwendet, um eine Auswahl in einem Bitmap anzuzeigen.
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.
Ziehen & Ablegen
alias
Ein Alias oder eine Verknüpfung soll erstellt werden.
copy
Etwas soll kopiert werden.
move
Etwas soll bewegt 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 Bewegen gezogen) werden.
grabbing
Etwas wird gegriffen (zum Bewegen gezogen).
Größe ändern & 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/die Spalte kann horizontal geändert werden.
Oft als Pfeile dargestellt, die nach links und rechts zeigen, getrennt durch eine vertikale Linie.
row-resize
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
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
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Bidirektionaler Resize-Cursor.
ns-resize
nesw-resize
nwse-resize
Zoom
zoom-in
Etwas kann hineingezoomt (vergrößert) oder herausgezoomt werden.
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.
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 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.
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.