cursor

├ť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
Berechneter Wertwie angegeben, aber mit absoluten url Werten
Animationstypdiskret

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

BCD tables only load in the browser

Siehe auch