cursor

Übersicht

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

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		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 258960
	help		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 ist no-drop gleich wie not-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 ist all-scroll gleich wie move.
	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

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

[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

• Using URL values for the cursor property (en)
• pointer-events
• Cursor Property (MSDN)