Übersicht

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

Initialwertauto
Anwendbar aufalle Elemente
VererbtJa
Medienwie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie angegeben, aber mit absoluten url Werten
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
cursor: pointer;
cursor: auto;

/* Verwendung von URL und Koordinaten */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

/* Globale Werte */
cursor: inherit;
cursor: initial;
cursor: unset;

Werte

<uri>
Eine durch Kommata getrennte Liste, die auf benutzerdefinierte Bilder verweist, die als Cursor angezeigt werden sollen. Mehr als eine Angabe macht Sinn, um eine Ausweichlösung (Fallback) bei nicht unterstützten Bildformaten in anderen Browsern bereitzustellen. Am Ende der Liste muss ein Fallback stehen, welches einen Cursor ohne URL angibt, um einen Mauszeiger anzeigen zu können, wenn kein benutzerdefiniertes Bild geladen werden kann. Siehe auch: Verwendung von URL Werten für die cursor Eigenschaft für weitere Details.
<x> <y>
Optionale Angabe von X- und Y-Koordinaten (vom Internet Explorer nicht unterstützt). Angegeben werden zwei Zahlen ohne Einheit.
Schlüsselwortwerte
Bewege die Maus über einen Wert zum Testen:
Kategorie CSS Wert
Mouseover zum Testen
  Beschreibung
Allgemein auto   Der Browser bestimmt aufgrund des aktuellen Kontextes, welcher Cursor angezeigt wird.
Wenn der Mauszeiger sich zum Beispiel über dem Text befindet, wird der text Cursor angezeigt.
default default.gif Standard Cursor. Üblicherweise durch ein Pfeil dargestellt.
none   Es wird kein Cursor wird angezeigt.
Links & Status context-menu context-menu.png Ein Kontextmenü wird unter dem Cursor angezeigt.
Unter Windows nicht verfügbar. Bug 258960
help help.gif Zeigt an, dass Hilfe verfügbar ist.
pointer pointer.gif Wird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt.
progress progress.gif Zeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei wait, weiterhin mit der Oberfläche arbeiten.
wait wait.gif Zeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt.
Auswahl cell cell.gif Zeigt an, dass Zellen ausgewählt werden können.
crosshair crosshair.gif Ein Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird.
text text.gif Zeigt an, dass der Text ausgewählt werden kann.
vertical-text vertical-text.gif Zeigt an, dass vertikaler Text ausgewählt werden kann.
Drag and Drop alias alias.gif Zeigt an, dass ein Tastenkürzel vorhanden ist.
copy copy.gif Zeigt an, dass etwas kopiert werden kann.
move move.gif Zeigt an, dass das Objekt bewegt werden kann.
no-drop no-drop.gif Zeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.
Bug 275173 unter Windows ist no-drop gleich wie not-allowed.
not-allowed not-allowed.gif Zeigt an, dass hier etwas nicht erlaubt ist.
Skalierung & Scrollen all-scroll all-scroll.gif Zeigt an, dass etwas in alle Richtungen gescrollt werden kann.
Bug 275174 unter Windows ist all-scroll gleich wie move.
col-resize col-resize.gif Zeigt an, dass das Element bzw. die Spalte horizontal skaliert werden kann. Meistens als Pfeile dargestellt, die nach rechts und links zeigen und in der Mitte einen Trennbalken haben.
row-resize row-resize.gif Zeigt an, dass das Element bzw. die Zeile vertikal skaliert werden kann. Meistens als Pfeile dargestellt, die nach unten und oben zeigen und in der Mitte einen Trennbalken haben.
n-resize n-resize.gif Zeigt an, dass von einer Ecke aus skaliert werden kann. Der se-resize Cursor wird zum Beispiel benutzt, wenn, von der unteren rechten Ecke aus, etwas bewegt/skaliert werden soll.
e-resize e-resize.gif
s-resize s-resize.gif
w-resize w-resize.gif
ne-resize ne-resize.gif
nw-resize nw-resize.gif
se-resize se-resize.gif
sw-resize sw-resize.gif
ew-resize ew-resize.gif Zeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann.
ns-resize ns-resize.gif
nesw-resize nesw-resize.gif
nwse-resize nwse-resize.gif
Zoom zoom-in zoom-in.gif

Indicates that something can be zoomed (magnified) in or out.

zoom-out zoom-out.gif
Greifen grab grab.gif

Indicates that something can be grabbed (dragged to be moved).

grabbing grabbing.gif

Formale Syntax

[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 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 | grab | grabbing ] ]

Beispiele

.foo {
  cursor: crosshair;
}

/* Benutze move wenn cell nicht unterstützt wird. */
.bar {
  cursor: move;
  cursor: cell;
}

/* Standardwert als Fallback für url() muss angegeben werden (funktioniert nicht ohne) */
.baz {
  cursor: url(hyper.cur), auto;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Basic User Interface Module Level 3
Die Definition von 'cursor' in dieser Spezifikation.
Empfehlung Mehrere Schlüsselwörter und die Positionierungssyntax für url() hinzugefügt.
CSS Level 2 (Revision 1)
Die Definition von 'cursor' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.
Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
autoChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
defaultChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inheritChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 9Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
noneChrome Vollständige Unterstützung 5Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 5WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
context-menuChrome Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise This cursor is only supported on macOS and Linux.
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5
Hinweise
Vollständige Unterstützung 1.5
Hinweise
Hinweise This cursor is only supported on macOS and Linux.
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
helpChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pointerChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
progressChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
waitChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
cellChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
crosshairChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
textChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
vertical-textChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Keine Unterstützung NeinOpera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
aliasChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
copyChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
moveChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
no-dropChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
not-allowedChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
all-scrollChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
col-resizeChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
row-resizeChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1.2WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Zoom cursors (zoom-in and zoom-out)Chrome Vollständige Unterstützung 37
Vollständige Unterstützung 37
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 24
Vollständige Unterstützung 24
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 24
Vollständige Unterstützung 24
Keine Unterstützung 15 — 23
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Grab cursors (grab and grabbing)Chrome Vollständige Unterstützung 68
Hinweise
Vollständige Unterstützung 68
Hinweise
Hinweise Chrome also continues to support the prefixed versions.
Vollständige Unterstützung 1
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Chrome 22 added Windows support.
Edge Vollständige Unterstützung 14Firefox Vollständige Unterstützung 27
Vollständige Unterstützung 27
Vollständige Unterstützung 1.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera ? Safari Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url()Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5
Hinweise
Vollständige Unterstützung 1.5
Hinweise
Hinweise Firefox 4 added macOS support.
IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url() positioning syntax
Experimentell
Chrome Vollständige Unterstützung 1Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 1.5
Hinweise
Vollständige Unterstützung 1.5
Hinweise
Hinweise Firefox 4 added macOS support.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 3WebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, R0bin, Sebastianz, bee8bit, fscholz, Jürgen Jeka, Michael2402
Zuletzt aktualisiert von: SJW,