CSS-Eigenschaft cursor

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>

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>

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.

Browser-Support

1.0+ 12.0+ 1.0+ 1.2+ 7.0+


Finden Sie das nützlich?

Ähnliche Artikel