Übersicht
Die cursor
CSS Eigenschaft legt den Cursor fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet.
Initialwert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Medien | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie angegeben, aber mit absoluten url Werten |
Animationstyp | diskret |
Kanonische Reihenfolge | die 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 TestenBeschreibung Allgemein auto
Der Browser bestimmt aufgrund des aktuellen Kontextes, welcher Cursor angezeigt wird.
Wenn der Mauszeiger sich zum Beispiel über dem Text befindet, wird dertext
Cursor angezeigt.default
Standard Cursor. Üblicherweise durch ein Pfeil dargestellt. none
Es wird kein Cursor wird angezeigt. Links & Status context-menu
Ein Kontextmenü wird unter dem Cursor angezeigt.
Unter Windows nicht verfügbar. Bug 258960help
Zeigt an, dass Hilfe verfügbar ist. pointer
Wird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt. progress
Zeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei wait
, weiterhin mit der Oberfläche arbeiten.wait
Zeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt. Auswahl cell
Zeigt an, dass Zellen ausgewählt werden können. crosshair
Ein Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird. text
Zeigt an, dass der Text ausgewählt werden kann. vertical-text
Zeigt an, dass vertikaler Text ausgewählt werden kann. Drag and Drop alias
Zeigt an, dass ein Tastenkürzel vorhanden ist. copy
Zeigt an, dass etwas kopiert werden kann. move
Zeigt an, dass das Objekt bewegt werden kann. no-drop
Zeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.
Bug 275173 unter Windows istno-drop
gleich wienot-allowed
.not-allowed
Zeigt an, dass hier etwas nicht erlaubt ist. Skalierung & Scrollen all-scroll
Zeigt an, dass etwas in alle Richtungen gescrollt werden kann.
Bug 275174 unter Windows istall-scroll
gleich wiemove
.col-resize
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
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
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
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Zeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann. ns-resize
nesw-resize
nwse-resize
Zoom zoom-in
Indicates that something can be zoomed (magnified) in or out.
zoom-out
Greifen grab
Indicates that something can be grabbed (dragged to be moved).
grabbing
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
cursor | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox
Vollständige Unterstützung
1
| IE
Vollständige Unterstützung
4
| Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
alias | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
all-scroll | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
auto | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
Bidirectional resize cursors (ew-resize , nesw-resize , ns-resize , and nwse-resize ) | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
cell | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
col-resize | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
context-menu | Chrome
Vollständige Unterstützung
1
| Edge Vollständige Unterstützung 12 | Firefox
Vollständige Unterstützung
1.5
| IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android
Vollständige Unterstützung
18
| Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
copy | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
crosshair | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
default | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
Grab cursors (grab and grabbing ) | Chrome
Vollständige Unterstützung
68
| Edge Vollständige Unterstützung 14 | Firefox
Vollständige Unterstützung
27
| IE Keine Unterstützung Nein | Opera
Vollständige Unterstützung
55
| Safari
Vollständige Unterstützung
11
| WebView Android Keine Unterstützung Nein | Chrome Android
Vollständige Unterstützung
68
| Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
help | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
inherit | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 8 | Opera Vollständige Unterstützung 9 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
move | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
no-drop | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
none | Chrome Vollständige Unterstützung 5 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 3 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung 15 | Safari Vollständige Unterstützung 5 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 4.2 | Samsung Internet Android ? |
not-allowed | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
pointer | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
progress | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
row-resize | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
text | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | 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 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
url() | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox
Vollständige Unterstützung
1.5
| IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 15 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
url() positioning syntax | Chrome Vollständige Unterstützung 1 | Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
1.5
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 15 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
vertical-text | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1.5 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 10.6 | Safari Vollständige Unterstützung 3 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
wait | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1.2 | WebView Android Keine Unterstützung Nein | Chrome Android Vollständige Unterstützung 18 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
Zoom cursors (zoom-in and zoom-out ) | Chrome
Vollständige Unterstützung
37
| Edge Vollständige Unterstützung 12 | Firefox
Vollständige Unterstützung
24
| IE Keine Unterstützung Nein | Opera
Vollständige Unterstützung
24
| Safari
Vollständige Unterstützung
9
| WebView Android Keine Unterstützung Nein | Chrome Android
Vollständige Unterstützung
37
| Firefox Android Keine Unterstützung Nein | Opera Android
Vollständige Unterstützung
24
| Safari iOS Vollständige Unterstützung 1 | 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.