Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: cursor, Kategorien: Bildschirm­darstellung (allgemein), User interface (CSS 2.1), Basic User Interface (CSS 3)

Darstellung des Cursors

Bestimmt die Darstellung des Mauszeigers.

CSS-Eigenschaft: cursor
KurzbeschreibungWerteStandardwertKategorieHinweis
Darstellung des Cursors
  • <uri>
  • <x>(CSS 3)
  • <y>(CSS 3)
  • auto
  • default
  • none(CSS 3)
  • context-menu(CSS 3)
  • help
  • pointer
  • progress
  • wait
  • cell(CSS 3)
  • crosshair
  • text
  • vertical-text(CSS 3)
  • alias(CSS 3)
  • copy(CSS 3)
  • move
  • no-drop(CSS 3)
  • not-allowed(CSS 3)
  • e-resize
  • n-resize
  • ne-resize
  • nw-resize
  • s-resize
  • se-resize
  • sw-resize
  • w-resize
  • ew-resize(CSS 3)
  • ns-resize(CSS 3)
  • nesw-resize(CSS 3)
  • nwse-resize(CSS 3)
  • col-resize(CSS 3)
  • row-resize(CSS 3)
  • all-scroll(CSS 3)
  • inherit
auto
Allgemein:
Bildschirm­darstellung
CSS 2.1:
User interface
CSS 3:
Basic User Interface
 

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.
Browserunterstützung von cursor
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu cursor:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    cue-before


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:

Eine Überschrift

Ein Text
Ein Link
 

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 &Auml;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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.419 sec.

Browser-Marktanteile