CSS 2.1: `cursor`

Erläuterungen

cursor beschreibt, welcher Mauszeiger beim Überfahren des aktuellen Elementes aktiv sein soll.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

auto (Ausgangswert): Das Anwenderprogramm legt den Mauszeiger automatisch nach Art des Inhalts des Elementes fest.
crosshair: Ein einfaches Kreuz, das an ein verkleinertes Fadenkreuz erinnert.
default: Der Mauszeiger, der unabhängig von einem Programm durch das System voreingestellt ist, wird verwendet.
pointer: Ein Zeiger, wie er üblicherweise über Links aktiviert wird.
move: Zeigt an, dass das unter dem Mauszeiger liegende Element als Ganzes bewegt werden kann.
text: Zeiger in Form eines '|' oder 'I', mit dem Text selektiert werden kann.
wait: Die bekannte Sanduhr, die anzeigt, dass ein Programm arbeitet und der Benutzer auf ein Ergebnis warten sollte.
help: Indiziert, dass für das Element unter dem Mauszeiger Hilfsangaben verfügbar sind.
<uri>: Eine Liste von Onlinequellen, aus denen das Anwenderprogramm den Mauszeiger ziehen soll. Jede Quelle entspricht dem Pfad zu einer Graphik. Ist die erste Quelle nicht nutzbar, greift er auf die zweite zurück, usw. Am Schluß der Liste muß ein generischer Zeiger genannt sein, der in jedem Falle benutzbar ist, um sicherzustellen, dass überhaupt ein Mauszeiger angezeigt wird. Wenn dieser Wert verwendet wird, dann muß er an erster Stelle stehen.
Wichtig: die Bezeichnung dieses Wertes lautet <uri>, die Notation erfolgt aber in dieser Form: url("...").
progress: Dieser Cursor zeigt an, dass ein Program zwar noch aktiv ist, der Benutzer aber dennoch interaktive Eingaben machen kann. Er wird meistens als Pfeil mit Uhr oder Sanduhr ausgegeben. Dieser Wert wird noch nicht durch alle Browser unterstützt. Dieser Wert wurde in CSS 2.1 neu aufgenommen.
e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize: Indiziert, dass der Rand des überfahrenen Elements veränderbar ist. Die Richtungsangabe ist analog zur Kompassrose, z. B. deutet ne-resize auf die Veränderbarkeit der Ecke oben rechts hin.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Wichtig: Die hier genannten Werte stimmen mit den Werten der Spezifikation überein. Einige Tutorials im Web nennen noch weitere Werte, wie not-allowed, all-scroll usw. Diese gehören aber nicht zu CSS 2.1, man kann daher von einer Unterstützung solcher Werte durch die Browser nicht ausgehen.

Code-Beispiele:

P.hilfe { cursor:help; }

td { cursor:url("/graphics/emotic-smile.png"), pointer;}

Browserunterstützung

Mit Ausnahme des Wertes <uri> werden alle Werte dieser Eigenschaft von den modernen Browsern unterstützt. Es gibt zudem folgende browserbedingte Einschränkungen:

IE/Win 5.x: IE/Win bis zur Version 5.5 erkennt diese Eigenschaft nicht.
IE/Win 6, IE 7: In der Version 6 bzw. 7 erkennt IE/Win die Werte <uri> und inherit noch nicht.
Opera 8 / 9: Opera unterstützt den Wert inherit erst mit der Version 9, den Wert url() noch nicht.
Firefox 1.5 etc.: Die Gecko-Engine ist die einzige Engine, die Wert <uri> unterstützt, und zwar an allen Elementen.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

(Keine.)

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.