CSS-Eigenschaft cursor

❮ Vorige Nächste ❯

Die Eigenschaft cursor wird verwendet, um den Typ des Mauszeigers zu definieren, wenn sich der Mauszeiger über dem Element befindet.

Die Erweiterung der Eigenschaft -webkit- wurde hinzugefügt, um einige Werte für Safari, Google Chrome und Opera (neuere Versionen) anzuzeigen.

Anfangswert	auto
Gilt für	Alle Elemente
Geerbt	Ja
Animierbar	Nein
Version	CSS2
DOM Syntax	object.style.cursor = "cell";

Syntax

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      text-align: center;
      font-family:  Roboto, Helvetica, Arial, sans-serif;
      }
      .auto { cursor: auto; }
      .help { cursor: help; }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 2px solid #666;
      border-radius: 20px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft cursor</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Versuch es selber!

Hier ist ein Beispiel mit allen Werten der Eigenschaft cursor . Für die Werte "zoom-in", "zoom-out", "grab" und "grabbing" wird die Erweiterung der Eigenschaft -webkit- hinzugefügt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 2px solid #666;
      border-radius: 20px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #eee;
      }
      .auto { cursor: auto; }
      .default { cursor: default; }
      .none { cursor: none; }
      .context-menu { cursor: context-menu; }
      .help { cursor: help; }
      .pointer { cursor: pointer; }
      .progress { cursor: progress; }
      .wait { cursor: wait; }
      .cell { cursor: cell; }
      .crosshair { cursor: crosshair; }
      .text { cursor: text; }
      .vertical-text { cursor: vertical-text; }
      .alias { cursor: alias; }
      .copy { cursor: copy; }
      .move { cursor: move; }
      .no-drop { cursor: no-drop; }
      .not-allowed { cursor: not-allowed; }
      .all-scroll { cursor: all-scroll; }
      .col-resize { cursor: col-resize; }
      .row-resize { cursor: row-resize; }
      .n-resize { cursor: n-resize; }
      .e-resize { cursor: e-resize; }
      .s-resize { cursor: s-resize; }
      .w-resize { cursor: w-resize; }
      .ns-resize { cursor: ns-resize; }
      .ew-resize { cursor: ew-resize; }
      .ne-resize { cursor: ne-resize; }
      .nw-resize { cursor: nw-resize; }
      .se-resize { cursor: se-resize; }
      .sw-resize { cursor: sw-resize; }
      .nesw-resize { cursor: nesw-resize; }
      .nwse-resize { cursor: nwse-resize; }
      .grab { 
      cursor: -webkit-grab; cursor: grab; }
      .grabbing {
      cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { 
      cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out {
      cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft cursor</h2>
    <p>Bewegen Sie den Mauszeiger über das Element, um die Änderungen zu sehen.</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Das bedeutet, dass der Browser einen Cursor einstellt. Es ist der Standardwert dieser Eigenschaft.
default	Es ist der Standard-Cursor.
none	Es bedeutet, dass es für das Element keinen gerenderten Cursor gibt.
context-menu	Der Cursor zeigt an, dass ein Kontextmenü verfügbar ist.
help	Der Cursor zeigt an, dass Hilfe verfügbar ist.
pointer	Der Cursor zeigt einen Link als Zeiger an.
progress	Der Cursor zeigt an, dass das Programm besetzt oder in Bearbeitung ist.
wait	Der Cursor zeigt an, dass das Programm besetzt ist.
cell	Es bedeutet, dass der Cursor anzeigt, dass eine Zelle oder ein Satz von Zellen ausgewählt werden kann.
crosschair	Der Cursor wird als Fadenkreuz dargestellt.
text	Der Cursor zeigt den Text, der ausgewählt werden kann, an.
URL	Eine kommagetrennte Liste von URLs zu benutzerdefinierten Cursorn.
vertical-text	Der Cursor zeigt einen vertikalen Text, der ausgewählt werden kann, an.
allias	Es bedeutet, dass der Cursor darauf hinweist, dass ein Alias für etwas erstellt werden soll.
copy	Der Cursor zeigt an, dass etwas kopiert werden kannn.
move	Der Cursor zeigt an, dass etwas bewegt werden kann.
no-drop	Der Cursor zeigt an, dass das gezogene Element hier nicht fallen gelassen werden kann.
not-allowed	Der Cursor zeigt an, dass die angeforderte Aktion nicht ausgeführt wird.
all-scroll	Es bedeutet, dass Der Cursor zeigt an, dass etwas in jede Richtung gescrollt werden kann.
col-resize	Der Cursor zeigt an, dass die Spalte horizontal in der Größe verändert werden kann.
row-resize	Der Cursor zeigt an, dass die Größe der Zeile vertikal geändert werden kann.
n-resize	Der Cursor zeigt an, dass ein Rand einer Box nach oben verschoben werden soll.
s-resize	Der Cursor zeigt an, dass ein Rand einer Box nach unten verschoben werden soll.
e-resize	Der Cursor zeigt an, dass ein Rand eines Randes nach rechts verschoben werden soll.
w-resize	Der Cursor zeigt an, dass ein Rand einer Box nach links verschoben werden soll.
ns-resize	Der Cursor zeigt einen bidirektionalen Cursor an, der die Größe ändert.
ew-resize	Der Cursor zeigt bidirektionale Größenänderung an.
ne-resize	Der Cursor zeigt an, dass ein Rand einer Box nach oben und rechts verschoben werden soll.
nw-resize	Der Cursor zeigt an, dass ein Rand einer Box nach oben und links verschoben werden soll.
se-resize	Der Cursor zeigt an, dass ein Rand einer Box nach unten und rechts verschoben werden soll.
sw-resize	Der Cursor zeigt an, dass ein Rand einer Box nach unten und links verschoben werden soll.
nesw-resize	Der Cursor zeigt einen bidirektionalen Cursor an, der die Größe ändert.
nwse-resize	Der Cursor zeigt einen bidirektionalen Cursor an, der die Größe ändert.
zoom-in	Der Cursor zeigt an, dass etwas vergrößert werden kann.
zoom-out	Der Cursor zeigt an, dass etwas verkleinert werden kann.
grab	Der Cursor zeigt an, dass etwas gegriffen werden kann.
grabbing	Der Cursor zeigt an, dass etwas gefasst werden kann.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.

CSS-Eigenschaft cursor

Syntax

Beispiel

Beispiel

Werte

Browser-Support

Übe dein Wissen