CSS-Eigenschaft: cursor, Kategorien: Bildschirmdarstellung (allgemein), User interface (CSS 2.1), Basic User Interface (CSS 3)
Darstellung des Cursors
Bestimmt die Darstellung des Mauszeigers.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Darstellung des Cursors |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), User interface (CSS 2.1), Basic User Interface (CSS 3):
- align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- box-sizing
- clip
- column-count
- column-fill
- column-width
- columns
- content
- Aktuelle Seite: cursor
- direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- icon
- justify-content
- nav-down
- nav-index
- nav-left
- nav-right
- nav-up
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- resize
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- visibility
- zoom
Folgendes ist beim Einsatz von cursor zu beachten:
- Die unterschiedlichen Varianten bzw. Werte sind in den unten folgenden Beispielen zu sehen.
- Wird eine Grafik über cursor:url('IMG') angegeben, ist immer eine zusätzliche Eigenschaft notwendig, welche das eigentliche Verhalten bestimmt. Ohne diese wird keine Grafik dargestellt.
- Das Aussehen des Cursors und seine unterschiedlichen Ausprägungen ist mehr vom Betriebssystem als vom Browser abhängig.
- Der Mauszeiger ist die Schnittstelle zwischen Webseite und dem Benutzer. Veränderungen der Eigenschaft cursor betrifft deswegen mehr als nur das reine Webseitenlayout.
- Wichtig für den Einsatz von cursor ist, welches "natürliche Verhalten" der Cursor hat. Er dient nicht nur der Webseitenbedienung, sondern der Bedienung des Rechners allgemein. Der Benutzer ist dabei an ein bestimmtes Verhalten gewöhnt, wie zum Beispiel das Warte-Symbol, wenn Programminstallationen durchgeführt werden, oder das "Händchen", das auch in Word oder PDFs eine verlinkte URL signalisiert.
- Dieses "natürliche Verhalten" sollte nicht außer Kraft gesetzt werden, der Benutzer sollte nicht unnötigerweise irritiert werden.
- Ein sinnvoller Einsatz ist beispielsweise cursor: pointer, um einen Bereich als interaktiv auszuzeichnen, wenn man diesen mit JavaScript-Click-Events belegt hat, um damit die Möglichkeit des Klickens zu signalisieren.
- Ein anderer sinnvoller Einsatz ist cursor: help, wenn z.B. ein <label> mit einem title versehen ist, der unterstützende Informationen enthält.
- Der CSS 3 Standard erweitert cursor um weitere Werte und Möglichkeiten. Beschreibung dazu folgt.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu cursor:
- W3C Spezifikation:
http://www.w3.org/TR/css3-ui/#cursor0
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
cue-before - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
direction
Beispiele
HTML:
<div>
<h1>Eine Überschrift</h1>
Ein Text<br>
<a href="#">Ein Link</a>
</div>
CSS:
div {
background-color: #dedede;
border: 1px solid #000;
padding: 20px;
}
/* Standardverhalten. Der Cursor wir über Schrift zu einem Strich, über einem Link zur Hand. */
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="doCrosshair">cursor: crosshair;</div>
CSS:
.doCrosshair {
cursor: crosshair;
}
Beispiel Nr. 2 So sieht's aus:
cursor: crosshair;
HTML:
<div class="doDefault">
cursor: default;
<a href="#">Ein Link</a>
(dem Link wird hier auch ein "cursor: default;" zugewiesen, damit verliert der Mauszeiger sein "natürliches" Verhalen beim Überfahren des Links)
</div>
CSS:
.doDefault,
.doDefault a {
cursor: default;
}
/* Über default verliert der Cursor die Eigenschaft, Links als solche zu symbolisieren. */
Beispiel Nr. 3 So sieht's aus:
cursor: default;
Ein Link
(dem Link wird hier auch ein "cursor: default;" zugewiesen, damit verliert der Mauszeiger sein "natürliches" Verhalen beim Überfahren des Links)
HTML:
<div class="doPointer">cursor: pointer;</div>
CSS:
.doPointer {
cursor: pointer;
}
/* pointer führt dazu, als ob man glaubt, es gäbe was zu klicken. */
Beispiel Nr. 4 So sieht's aus:
cursor: pointer;
HTML:
<div class="doMove">cursor: move;</div>
CSS:
.doMove {
cursor: move;
}
/* move symbolisiert, dass man ein Element verschieben kann. Für verschiedene JavaScript-Funktionalitäten sinnvoll. */
Beispiel Nr. 5 So sieht's aus:
cursor: move;
HTML:
<div class="doEresize">cursor: e-resize;</div>
CSS:
.doEresize {
cursor: e-resize;
}
Beispiel Nr. 6 So sieht's aus:
cursor: e-resize;
HTML:
<div class="doNEresize">cursor: ne-resize;</div>
CSS:
.doNEresize {
cursor: ne-resize;
}
Beispiel Nr. 7 So sieht's aus:
cursor: ne-resize;
HTML:
<div class="doNWresize">cursor: nw-resize</div>
CSS:
.doNWresize {
cursor: nw-resize;
}
Beispiel Nr. 8 So sieht's aus:
cursor: nw-resize
HTML:
<div class="doNresize">cursor: n-resize;</div>
CSS:
.doNresize {
cursor: n-resize;
}
Beispiel Nr. 9 So sieht's aus:
cursor: n-resize;
HTML:
<div class="doSEresize">cursor: se-resize;</div>
CSS:
.doSEresize {
cursor: se-resize;
}
Beispiel Nr. 10 So sieht's aus:
cursor: se-resize;
HTML:
<div class="doSWresize">cursor: sw-resize;</div>
CSS:
.doSWresize {
cursor: sw-resize;
}
Beispiel Nr. 11 So sieht's aus:
cursor: sw-resize;
HTML:
<div class="doSresize">cursor: s-resize;</div>
CSS:
.doSresize {
cursor: s-resize;
}
Beispiel Nr. 12 So sieht's aus:
cursor: s-resize;
HTML:
<div class="doWresize">cursor: w-resize;</div>
CSS:
.doWresize {
cursor: w-resize;
}
Beispiel Nr. 13 So sieht's aus:
cursor: w-resize;
HTML:
<div class="doText">cursor: text;</div>
CSS:
.doText {
cursor: text;
}
Beispiel Nr. 14 So sieht's aus:
cursor: text;
HTML:
<div class="doWait">cursor: wait;</div>
CSS:
.doWait {
cursor: wait;
}
/* ...und wartet, und warted, und warted... */
Beispiel Nr. 15 So sieht's aus:
cursor: wait;
HTML:
<div><strong class="doHelp" title="Ein Hilfetext">cursor: help;</strong></div>
CSS:
.doHelp {
cursor: help;
}
/* help ist durchaus unterstützend zu Optimierung der Usability. */
Beispiel Nr. 16 So sieht's aus:
cursor: help;
HTML:
<div class="doProgress">cursor: progress;</div>
CSS:
.doProgress {
cursor: progress;
}
/* Kein Unterschied zu wait. */
Beispiel Nr. 17 So sieht's aus:
cursor: progress;
HTML:
<div class="doUri">Wenn der Standard-Mauszeiger fehlt...</div>
CSS:
.doUri {
cursor:url('/img/hand.gif'), move;
}
/* Eine Grafik als Cursor benötigt immer einen zweiten Wert, um die Änderung des Mauszeigers zu aktivieren. */
Beispiel Nr. 18 So sieht's aus:
Wenn der Standard-Mauszeiger fehlt...
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!