CSS/cursor

Übersicht

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

• Standardwert auto
• Anwendbar auf Alle Elemente
• Vererbt Ja
• Prozentwerte —
• Medium visuell, interaktiv
• Berechneter Wert Wie angegeben, aber relative URL's werden in absolute URL's konvertiert
• Animierbar Nein
• Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

cursor:[ [ <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 ] ]

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.

inherit

Der Wert des Elternelements wird geerbt.

Unterstützte CSS Standardwerte

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
Drag & Drop	grab		Indicates that something can be grabbed (dragged to be moved).
	grabbing

Hinweise

Beispiele

Live Beispiel

.foo { cursor: crosshair; }

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

.baz { url(hyper.cur), auto }          /* Standardwert als Fallback, damit ein Cursor gezeigt werden kann.*/

Browser Kompatibilität

[1] Mozilla and WebKit verwenden context-menu nicht in Windows, Opera schon.
[2] In Safari funktioniert alias, cell, copy, none nicht in Windows (was ist mit Mac?).

Spezifikation

• CSS 2.1 User Interface #cursor
• CSS 3 User Interface #cursor
• Cursor Property (MSDN)

Siehe auch

• Verwendung von URL Werten für die cursor Eigenschaft
• Giving 'cursor' a Hand (en)
• pointer-events