CSS cursor – Referenz, Beispiel und Labor

stylesheet.css · cursor

.probe {
  cursor: crosshair;
}

Zeiger über diese Box bewegen.

berechneter Wertcursor: crosshair

Box-Breite–

Box-Höhe–

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):

'cursor'
[ [<uri> ,]* 
[ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | 
se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

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.)

Eigene Zeiger mit Rückfall

Die Grammatik verlangt eine Besonderheit: Vor eigenen Zeigern dürfen beliebig viele Pfadangaben stehen, am Ende muss aber immer ein Schlüsselwort folgen. Die Liste ohne abschließendes Schlüsselwort ist ungültig, und die ganze Deklaration wird verworfen.

Der Grund ist derselbe wie bei Schriftlisten: Eine Datei kann fehlen oder in einem Format vorliegen, das das Anwenderprogramm nicht kennt. Das Schlüsselwort am Ende sorgt dafür, dass in jedem Fall ein Zeiger übrig bleibt, denn ein fehlender Mauszeiger wäre für die Bedienung schwerwiegender als ein falscher.

Für eigene Zeiger gelten außerdem Grenzen, die nicht in CSS stehen, sondern in den Anwenderprogrammen: eine Höchstgröße, ab der die Grafik ignoriert wird, und die Regel, dass ein Zeiger den Bildschirm nicht vollständig verdecken darf. Beides ist eine Vorkehrung gegen Oberflächen, die vortäuschen, woanders zu sein, als der Zeiger anzeigt.

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.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: auto
Berechneter Wert: Absoluter Wert für <uri>, sonst spezifizierter Wert
Vererbung: Ja
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Visual, Interaktiv

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft cursor