CSS-Cursor-Eigenschaft

Die Eigenschaft cursor definiert den Typ des Mauszeigers, wenn sich der Mauszeiger über dem Element befindet.

Der Cursor wird als null oder mehr durch Kommas getrennte <url>-Werte definiert, gefolgt von einem Schlüsselwortwert. Jede dieser <url>s muss auf eine Bilddatei verweisen. Der Browser greift auf das nächste Bild zurück, wenn er das zuerst angegebene Bild nicht laden kann. Wenn der Browser kein Bild findet, greift er auf den Schlüsselwortwert zurück.

INFO

Moderne Browser unterstützen grab, grabbing, zoom-in und zoom-out ohne Vendor-Präfixe.

Initial Value	auto
Applies to	Alle Elemente.
Inherited	Ja.
Animatable	Nein.
Version	CSS2
DOM Syntax	object.style.cursor = "cell";

Syntax

Syntax der CSS-Eigenschaft cursor

css

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 für die Eigenschaft `cursor`:

Beispiel der CSS-Eigenschaft cursor mit den Werten auto und help

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Try it Yourself »

Hier ist ein Beispiel mit allen Werten der Eigenschaft cursor. Moderne Browser unterstützen diese Werte ohne Vendor-Präfixe.

Beispiel für die Eigenschaft `cursor` mit den Werten "zoom-in", "zoom-out", "grab" und "grabbing":

Beispiel der CSS-Eigenschaft cursor mit allen Werten

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</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>

Try it Yourself »

Beispiel für die Eigenschaft `cursor` mit dem Wert "url":

Beispiel der Eigenschaft cursor mit der URL

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("https://de.w3docs.com/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Try it Yourself »

Werte

Value	Description	Play it
auto	Das bedeutet, dass der Browser einen Cursor festlegt. Es ist der Standardwert dieser Eigenschaft.	Play it »
default	Das ist der Standardcursor.	Play it »
none	Das bedeutet, dass für das Element kein Cursor gerendert wird.	Play it »
context-menu	Der Cursor zeigt an, dass ein Kontextmenü verfügbar ist.	Play it »
help	Der Cursor zeigt an, dass Hilfe verfügbar ist.	Play it »
pointer	Der Cursor zeigt einen Link als Zeiger an.	Play it »
progress	Der Cursor zeigt an, dass das Programm beschäftigt ist oder ausgeführt wird.	Play it »
wait	Der Cursor zeigt an, dass das Programm beschäftigt ist.	Play it »
cell	Das bedeutet, dass der Cursor anzeigt, dass eine Zelle oder ein Zellbereich ausgewählt werden kann.	Play it »
crosshair	Der Cursor wird als Fadenkreuz dargestellt.	Play it »
text	Der Cursor zeigt Text an, der ausgewählt werden kann.	Play it »
`<url>`	Eine durch Kommas getrennte Liste von URLs für benutzerdefinierte Cursor.	Play it »
vertical-text	Der Cursor zeigt vertikalen Text an, der ausgewählt werden kann.	Play it »
alias	Das bedeutet, dass der Cursor anzeigt, dass ein Alias von etwas erstellt werden soll.	Play it »
copy	Der Cursor zeigt etwas an, das kopiert werden kann.	Play it »
move	Der Cursor zeigt an, dass etwas verschoben werden kann.	Play it »
no-drop	Der Cursor zeigt an, dass das gezogene Element hier nicht abgelegt werden kann.	Play it »
not-allowed	Der Cursor zeigt an, dass die angeforderte Aktion nicht ausgeführt wird.	Play it »
all-scroll	Das bedeutet, dass der Cursor anzeigt, dass etwas in jede Richtung gescrollt werden kann.	Play it »
col-resize	Der Cursor zeigt an, dass die Spalte horizontal in der Größe geändert werden kann.	Play it »
row-resize	Der Cursor zeigt an, dass die Zeile vertikal in der Größe geändert werden kann.	Play it »
n-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach oben verschoben werden soll.	Play it »
s-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach unten verschoben werden soll.	Play it »
e-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach rechts verschoben werden soll.	Play it »
w-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach links verschoben werden soll.	Play it »
ns-resize	Der Cursor zeigt einen bidirektionalen Größenänderungscursor an.	Play it »
ew-resize	Der Cursor zeigt einen bidirektionalen Größenänderungscursor an.	Play it »
ne-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach oben und rechts verschoben werden soll.	Play it »
nw-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach oben und links verschoben werden soll.	Play it »
se-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach unten und rechts verschoben werden soll.	Play it »
sw-resize	Der Cursor zeigt an, dass eine Kante eines Kastens nach unten und links verschoben werden soll.	Play it »
nesw-resize	Der Cursor zeigt einen bidirektionalen Größenänderungscursor an.	Play it »
nwse-resize	Der Cursor zeigt einen bidirektionalen Größenänderungscursor an.	Play it »
zoom-in	Der Cursor zeigt an, dass etwas vergrößert werden kann.	Play it »
zoom-out	Der Cursor zeigt an, dass etwas verkleinert werden kann.	Play it »
grab	Der Cursor zeigt an, dass etwas gegriffen werden kann.	Play it »
grabbing	Der Cursor zeigt an, dass ein Element derzeit gezogen wird.	Play it »
initial	Es bewirkt, dass die Eigenschaft ihren Standardwert verwendet.	Play it »
inherit	Es erbt die Eigenschaft vom Elternelement.

Practice

What does the CSS 'cursor' property specify in web design?

It specifies the type of cursor to be displayed when pointing over an element.It specifies the color of the cursor when pointing over an element.It specifies the size of the cursor when pointing over an element.It affects the behavior of the cursor when interacting with text or graphical elements.

CSS-Cursor-Eigenschaft ​

Syntax ​

Beispiel für die Eigenschaft cursor: ​

Beispiel für die Eigenschaft cursor mit den Werten "zoom-in", "zoom-out", "grab" und "grabbing": ​

Beispiel für die Eigenschaft cursor mit dem Wert "url": ​

Werte ​

Practice ​

CSS-Cursor-Eigenschaft

Syntax

Beispiel für die Eigenschaft `cursor`:

Beispiel für die Eigenschaft `cursor` mit den Werten "zoom-in", "zoom-out", "grab" und "grabbing":

Beispiel für die Eigenschaft `cursor` mit dem Wert "url":

Werte

Practice