CSS 2.1 ::Referenz ::Eigenschaften

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

'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.
Wert 'crosshair'.
crosshair
Ein einfaches Kreuz, das an ein verkleinertes Fadenkreuz erinnert.
Wert 'default'.
default
Der Mauszeiger, der unabhängig von einem Programm durch das System voreingestellt ist, wird verwendet.
Wert 'pointer'.
pointer
Ein Zeiger, wie er üblicherweise über Links aktiviert wird.
Wert 'move'.
move
Zeigt an, dass das unter dem Mauszeiger liegende Element als Ganzes bewegt werden kann.
Wert 'text'.
text
Zeiger in Form eines '|' oder 'I', mit dem Text selektiert werden kann.
Wert 'wait'.
wait
Die bekannte Sanduhr, die anzeigt, dass ein Programm arbeitet und der Benutzer auf ein Ergebnis warten sollte.
Wert 'help'.
help
Indiziert, dass für das Element unter dem Mauszeiger Hilfsangaben verfügbar sind.
Wert 'uri'.
<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("...").
Wert 'progress'.
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.
Werte 'resize' verschiedener Richtungen.
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.

Weitere Charakteristika:

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

Ausgangs-
wert:
Berechneter
Wert:
Vererbung: Anwendbar-
keit:
%-Bezugs-
wert:
Medien-
gruppe(n):
auto Absoluter Wert für <uri>, sonst spezifizierter Wert Ja Auf alle Elemente Nicht zutreffend Visual, Interaktiv

Verwendete Standards

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

 TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/ref/cursor.shtml
Gedruckt am Donnerstag, dem 24. April, 2014.
© Copyright All Contents 2002- 2014 K. Langenberg.
Commercial Use prohibited.


Notizen: