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 default.gif Standard Cursor. Üblicherweise durch ein Pfeil dargestellt.
none   Es wird kein Cursor wird angezeigt.
Links & Status context-menu context-menu.png Ein Kontextmenü wird unter dem Cursor angezeigt.
Unter Windows nicht verfügbar. Bug 258960
help help.gif Zeigt an, dass Hilfe verfügbar ist.
pointer pointer.gif Wird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt.
progress progress.gif Zeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei wait, weiterhin mit der Oberfläche arbeiten.
wait wait.gif Zeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt.
Auswahl cell cell.gif Zeigt an, dass Zellen ausgewählt werden können.
crosshair crosshair.gif Ein Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird.
text text.gif Zeigt an, dass der Text ausgewählt werden kann.
vertical-text vertical-text.gif Zeigt an, dass vertikaler Text ausgewählt werden kann.
Drag and drop alias alias.gif Zeigt an, dass ein Tastenkürzel vorhanden ist.
copy copy.gif Zeigt an, dass etwas kopiert werden kann.
move move.gif Zeigt an, dass das Objekt bewegt werden kann.
no-drop no-drop.gifZeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.
Bug 275173 unter Windows ist no-drop gleich wie not-allowed.
not-allowed not-allowed.gif Zeigt an, dass hier etwas nicht erlaubt ist.
Skalierung & Scrollen all-scroll all-scroll.gif Zeigt an, dass etwas in alle Richtungen gescrollt werden kann.
Bug 275174 unter Windows ist all-scroll gleich wie move.
col-resize col-resize.gif 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 row-resize.gif 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 n-resize.gif 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 e-resize.gif
s-resize s-resize.gif
w-resize w-resize.gif
ne-resize ne-resize.gif
nw-resize nw-resize.gif
se-resize se-resize.gif
sw-resize sw-resize.gif
ew-resize ew-resize.gif Zeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann.
ns-resize ns-resize.gif
nesw-resize nesw-resize.gif
nwse-resize nwse-resize.gif
Zoom zoom-in zoom-in.gif

Indicates that something can be zoomed (magnified) in or out.

zoom-out zoom-out.gif
Drag & Drop grab grab.gif

Indicates that something can be grabbed (dragged to be moved).

grabbing grabbing.gif

Hinweise

Hinweis zu Gecko 2.0
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Unterstützung zum Laden eines Cursors von einer URI wurde für Mac OS X in Gecko 2.0 eingeführt. Vorherige Versionen unterstützen keine URI-Angaben unter OS X.

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

Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
auto | crosshair | default | move | text | wait | help | n-resize | e-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize 1.0 1.0 (1.0) 4.0 7.0 1.2
hand (für diesen Zweck verwendet man pointer ) Not supported Not supported 4.0 Not supported Not supported
pointer | progress 1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0
url()   See Using URL values [en] 1.0 (523) 1.5 (1.8) 6.0 Not supported 3.0
not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize 1.0 (522) 1.5 (1.8) 6.0 10.6 3.0
alias | cell | copy | ew-resize | ns-resize | nesw-resize | nwse-resize | [1] context-menu 1.0 (522) 1.5 (1.8) Not supported 10.6 3.0 [2]
none 5.0 (533) 3.0 (1.9) 9.0 Not supported 5.0 [2]
inherit 1.0 1.0 8.0 9.0 1.2
zoom-in | zoom-out 1.0 (522) -webkit-

1.0 (1.4) -moz-
24.0

Not supported 11.6 3.0 -webkit-
grab, grabbing 1.0; Windows: 22.0 -webkit- 1.5 (1.8) -moz-
27.0
Not supported ? 4.0 -webkit-

[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

Siehe auch

Anhänge

Datei Größe Datum Angehängt von
alias.gif
176 Bytes 2009-04-26 20:30:31 Jürgen Jeka
all-scroll.gif
98 Bytes 2009-04-21 16:00:52 Jürgen Jeka
cell.gif
98 Bytes 2009-04-21 16:00:52 Jürgen Jeka
col-resize.gif
106 Bytes 2009-04-27 23:04:31 Jürgen Jeka
context-menu.png
233 Bytes 2009-04-25 19:59:48 Jürgen Jeka
copy.gif
173 Bytes 2009-04-25 20:03:29 Jürgen Jeka
crosshair.gif
86 Bytes 2009-04-21 16:01:25 Jürgen Jeka
default.gif
98 Bytes 2009-04-21 16:01:45 Jürgen Jeka
grab.gif
103 Bytes 2009-04-21 16:01:47 Jürgen Jeka
grabbing.gif
91 Bytes 2009-04-21 16:02:06 Jürgen Jeka
help.gif
119 Bytes 2009-04-21 16:02:06 Jürgen Jeka
move.gif
103 Bytes 2009-04-25 20:01:33 Jürgen Jeka
no-drop.gif
141 Bytes 2009-04-25 20:05:19 Jürgen Jeka
not-allowed.gif
185 Bytes 2009-04-25 20:17:59 Jürgen Jeka
pointer.gif
109 Bytes 2009-04-21 16:03:34 Jürgen Jeka
progress.gif
136 Bytes 2009-04-26 20:30:33 Jürgen Jeka
row-resize.gif
88 Bytes 2009-04-27 23:04:33 Jürgen Jeka
vertical-text.gif
84 Bytes 2009-04-21 16:04:10 Jürgen Jeka
wait.gif
114 Bytes 2009-04-21 16:04:19 Jürgen Jeka
zoom-in.gif
98 Bytes 2009-04-26 21:16:34 Jürgen Jeka
zoom-out.gif
96 Bytes 2009-04-26 21:16:36 Jürgen Jeka
New resume!.doc
20992 Bytes 2011-10-09 23:15:48 MOCHAD@COMCAST.NET
cubic-bezier, example.png
288596 Bytes 2011-10-10 06:25:24 teoli
TF_with_output_gt_than_1.png
248751 Bytes 2011-10-10 09:22:39 teoli
TF_with_output_gt_than_1_clipped.png
248751 Bytes 2011-10-10 09:22:40 teoli
steps(2,start).png
247755 Bytes 2011-10-10 11:57:44 teoli
steps(4,end).png
247755 Bytes 2011-10-10 11:57:45 teoli
coord_in_R2.png
167468 Bytes 2011-10-11 11:30:55 teoli
transform_functions_generic_transformation_cart.png
1964 Bytes 2011-10-11 13:24:58 teoli
transform_functions_transform_composition_cart.png
3039 Bytes 2011-10-11 14:02:23 teoli
transform_function_generic_2D_homo.png
1431 Bytes 2011-10-11 16:06:00 teoli
transform_functions_rotation_cart.png
1542 Bytes 2011-10-12 06:36:22 teoli
transform-functions-scale_2_2.png
15461 Bytes 2011-10-13 11:47:11 teoli
transform_functions_scale_cart.png
835 Bytes 2011-10-13 13:04:29 teoli
transform_functions_scaleX_cart.png
1012 Bytes 2011-10-13 17:45:45 teoli
transform_functions_scaleX_homo.png
714 Bytes 2011-10-13 17:45:46 teoli
Bugs
17920 Bytes 2011-10-13 23:25:50 FarmGirl
radiomak tack 1.png
236656 Bytes 2011-10-21 10:41:18 radiomak
template new web 2.png
27498 Bytes 2011-10-21 10:41:19 radiomak
Add %S.png
56700 Bytes 2011-10-21 20:03:51 jbeatty
text-overflow.png
6704 Bytes 2012-01-16 14:40:22 teoli
foto minha amb han.JPG
92611 Bytes 2011-10-28 17:57:51 marciocaetano44
1
85 Bytes 2012-08-02 03:59:51 teoli
3
83 Bytes 2012-08-02 04:00:05 teoli
4
84 Bytes 2012-08-02 04:00:17 teoli
6
88 Bytes 2012-08-02 04:00:28 teoli
Example of a resize towards the top cursor
Example of a resize towards the top cursor
1135 Bytes 2012-09-29 02:57:26 teoli
Example of a resize towards the right cursor
Example of a resize towards the right cursor
1129 Bytes 2012-09-29 02:57:48 teoli
Example of a resize towards the bottom cursor
Example of a resize towards the bottom cursor
1137 Bytes 2012-09-29 02:58:13 teoli
Example of a resize towards the left cursor
Example of a resize towards the left cursor
1130 Bytes 2012-09-29 02:59:29 teoli
Example of a resize towards the top-right corner cursor
Example of a resize towards the top-right corner cursor
1133 Bytes 2012-09-29 03:14:13 teoli
Example of a resize towards the top-left corner cursor
Example of a resize towards the top-left corner cursor
1133 Bytes 2012-09-29 03:14:38 teoli
Example of a resize towards the bottom-left corner cursor
Example of a resize towards the bottom-left corner cursor
1133 Bytes 2012-09-29 03:15:03 teoli
Example of a resize towards the bottom-right corner cursor
Example of a resize towards the bottom-right corner cursor
1133 Bytes 2012-09-29 03:15:31 teoli

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:
Mitwirkende an dieser Seite: SJW, fscholz, Michael2402, Jürgen Jeka
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden