Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Ü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
Medienvisuell, interaktiv
Berechneter Wertwie angegeben, aber URIs absolut gemacht
AnimierbarNein
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

[ [ <uri> [<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.
Anwärter 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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
auto, crosshair, default, move, text, wait, help,
n-resize, e-resize, s-resize, w-resize,
ne-resize, nw-resize, se-resize, sw-resize
1.0 1.0 4.0[1] 7.0 1.2
pointer, progress 1.0 1.0 6.0 7.0 1.2
url() 1.0 1.5
4.0[2]
6.0 ? 3.0
Positionierungssyntax für url() Werte (Ja) (Ja) Nicht unterstützt ? (Ja)
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize
1.0 1.5 6.0 10.6 3.0
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize
1.0 1.5 10.0 10.6 3.0
context-menu 1.0[3] 1.5[3] 10.0 10.6 3.0
none 5.0 3.0 9.0 ? 5.0
inherit 1.0 1.0 8.0 9.0 1.2
zoom-in, zoom-out

1.0 -webkit-
37

1.0 -moz-
24.0
Nicht unterstützt 11.6
15-23 -webkit-
24
3.0 -webkit-
9
grab, grabbing 1.0 -webkit-
22.0 -webkit-[4]
1.5 -moz-
27.0
Nicht unterstützt (Ja) 4.0 -webkit-
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
auto, crosshair, default, move, text, wait, help,
n-resize, e-resize, s-resize, w-resize,
ne-resize, nw-resize, se-resize, sw-resize
? ? ? ? ?
pointer, progress ? ? ? ? ?
url() ? ? ? ? ?
Positionierungssyntax für url() Werte ? ? ? ? ?
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize
? ? ? ? ?
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize
? ? ? ? ?
context-menu ? ? ? ? ?
none ? ? ? ? ?
inherit ? ? ? ? ?
zoom-in, zoom-out ? ? ? ? ?
grab, grabbing ? ? ? ? ?

[1] Falls im Internet Explorer 11 einem Element cursor zugewiesen wird und dieses Element sich unterhalb eines offenen <select> Menüs befindet und der Benutzer mit dem Mauszeiger über einen <select> Menüeintrag fährt, das sich oben im erwähnten Element befindet, wird der Zeiger für das Element angezeigt anstatt dem für das <select> Element normalen Zeigers. Siehe IE bug 963961.

[2] Unterstützung für dieses Feature wurde in Mac OS X hinzugefügt.

[3] Nur in Mac OS X und Linux unterstützt.

[4] Unterstützung für dieses Feature wurde in Windows hinzugefügt.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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