W3docs
de
Anmelden

CSS cursor-Eigenschaft

Die CSS cursor-Eigenschaft legt die Form des Mauszeigers beim Hovern fest. Alle Werte mit Beispielen.

Die cursor-Eigenschaft steuert die Form des Mauszeigers, wenn dieser über einem Element schwebt. Sie ist ein visueller Hinweis: Die Form des Zeigers sagt dem Nutzer, was passiert, wenn er klickt, zieht oder hovert – eine Hand bedeutet „das ist anklickbar", ein Textbalken bedeutet „hier kann Text ausgewählt werden", ein Ladekreis bedeutet „bitte warten".

Diese Seite erklärt, wann cursor sinnvoll einzusetzen ist, die vollständige Liste der Schlüsselwortwerte nach Zweck gruppiert, wie man ein eigenes Bild als benutzerdefinierten Cursor lädt (mit der <url>-Syntax und ihren Fallbacks) sowie die Barrierefreiheitsfallen, die es zu vermeiden gilt.

Wann und warum man es verwendet

Browser wählen bereits einen passenden Cursor für jedes Element – einen Textbalken über einem Absatz, eine zeigende Hand über einem Link. Eine Überschreibung des Standards ist hauptsächlich dann sinnvoll, wenn:

  • ein benutzerdefiniertes interaktives Steuerelement gebaut wird (ein <div> als Button, eine ziehbare Karte, ein sortierbarer Griff), bei dem der Browser keine Möglichkeit hat, den richtigen Cursor zu ermitteln. Hier stellt ein pointer- oder grab-Cursor die vom Nutzer erwartete Affordanz wieder her.
  • ein Zustand signalisiert werden soll – ein deaktiviertes Steuerelement mit not-allowed oder ein beschäftigter Bereich mit wait/progress.
  • ein markentypischer oder spielartiger Zeiger über ein benutzerdefiniertes Bild benötigt wird.

Verwenden Sie es sparsam und vorhersehbar. Ein Cursor, der dem Verhalten widerspricht (eine pointer-Hand über nicht anklickbarem Text oder none, das den Cursor auf einer normalen Seite versteckt), verwirrt die Nutzer mehr, als er hilft.

Syntaxübersicht

Der Wert besteht aus null oder mehr durch Komma getrennten <url>-Werten, die jeweils auf eine Bilddatei zeigen, gefolgt von einem obligatorischen Schlüsselwort-Fallback. Der Browser versucht jedes Bild der Reihe nach und fällt zum nächsten zurück, wenn ein Bild nicht geladen werden kann; wenn keines geladen wird, verwendet er das Schlüsselwort. Deshalb ist das Schlüsselwort am Ende erforderlich – es garantiert, dass der Nutzer immer irgendeinen Cursor erhält.

/* keyword only */
cursor: pointer;

/* custom image with a keyword fallback (the fallback is required) */
cursor: url("cursor.png"), auto;

/* multiple images tried in order, then the fallback */
cursor: url("cursor.svg"), url("cursor.png"), auto;
Info

Moderne Browser unterstützen grab, grabbing, zoom-in und zoom-out ohne Vendor-Präfixe. Damit Klicks dort landen, wo Nutzer es erwarten, sollte man benutzerdefinierte Cursor-Änderungen mit den verwandten Eigenschaften pointer-events und user-select kombinieren.

Anfangswertauto
Gilt fürAlle Elemente.
VererbbarJa.
AnimierbarNein.
VersionCSS2
DOM-Syntaxobject.style.cursor = "cell";

Alle Schlüsselwortwerte

Alle Schlüsselwörter, die die Eigenschaft akzeptiert, auf einen Blick. Die gebräuchlichsten im alltäglichen UI-Bereich sind pointer (anklickbar), default (der einfache Pfeil), text, move, grab/grabbing und not-allowed.

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 mit den Werten auto und help

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

<!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>
Probier es selbst »

Das nächste Beispiel rendert ein beschriftetes Feld für jeden Schlüsselwortwert, sodass Sie mit der Maus darüber fahren und den jeweiligen Cursor in Ihrem Browser sehen können.

Beispiel mit allen Cursor-Werten

Beispiel der CSS cursor-Eigenschaft mit allen Werten

<!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>
Probier es selbst »

Benutzerdefinierter Cursor mit dem Wert "url"

Es ist möglich, ein eigenes Bild als Cursor zu verwenden. Einige Regeln machen dies zuverlässig:

  • Immer mit einem Schlüsselwort-Fallback abschließen (, auto unten). Ohne ihn ist die Deklaration ungültig und wird vollständig ignoriert.
  • Bilder klein halten. Browser begrenzen benutzerdefinierte Cursor auf etwa 32×32 px (128×128 px bei manchen); größere Bilder werden stillschweigend verworfen und der Fallback wird verwendet.
  • Den Hotspot setzen – den aktiven Klickpunkt – mit zwei optionalen Zahlen nach der URL: cursor: url("crosshair.png") 16 16, auto; macht die Mitte eines 32×32 Bildes zum Klickpunkt. Werden sie weggelassen, wird die obere linke Ecke verwendet.
  • Ein Format verwenden, das jeder Zielbrowser unterstützt (PNG und SVG sind sicher; .cur/.ani sind nur für Windows).

Beispiel der cursor-Eigenschaft mit dem url-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/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>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
autoDer Browser setzt einen Cursor. Dies ist der Standardwert dieser Eigenschaft.Ausprobieren »
defaultDer Standard-Cursor.Ausprobieren »
noneFür das Element wird kein Cursor gerendert.Ausprobieren »
context-menuDer Cursor zeigt an, dass ein Kontextmenü verfügbar ist.Ausprobieren »
helpDer Cursor zeigt an, dass Hilfe verfügbar ist.Ausprobieren »
pointerDer Cursor zeigt einen Link als Zeiger an.Ausprobieren »
progressDer Cursor zeigt an, dass das Programm beschäftigt oder in Bearbeitung ist.Ausprobieren »
waitDer Cursor zeigt an, dass das Programm beschäftigt ist.Ausprobieren »
cellDer Cursor zeigt an, dass eine Zelle oder eine Gruppe von Zellen ausgewählt werden kann.Ausprobieren »
crosshairDer Cursor wird als Fadenkreuz gerendert.Ausprobieren »
textDer Cursor zeigt Text an, der ausgewählt werden kann.Ausprobieren »
<url>Eine durch Komma getrennte Liste von URLs für benutzerdefinierte Cursor.Ausprobieren »
vertical-textDer Cursor zeigt vertikalen Text an, der ausgewählt werden kann.Ausprobieren »
aliasDer Cursor zeigt an, dass ein Alias von etwas erstellt werden soll.Ausprobieren »
copyDer Cursor zeigt etwas an, das kopiert werden kann.Ausprobieren »
moveDer Cursor zeigt an, dass etwas verschoben werden kann.Ausprobieren »
no-dropDer Cursor zeigt an, dass das gezogene Element hier nicht abgelegt werden kann.Ausprobieren »
not-allowedDer Cursor zeigt an, dass die angeforderte Aktion nicht ausgeführt wird.Ausprobieren »
all-scrollDer Cursor zeigt an, dass in alle Richtungen gescrollt werden kann.Ausprobieren »
col-resizeDer Cursor zeigt an, dass die Spalte horizontal in der Größe geändert werden kann.Ausprobieren »
row-resizeDer Cursor zeigt an, dass die Zeile vertikal in der Größe geändert werden kann.Ausprobieren »
n-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach oben verschoben werden soll.Ausprobieren »
s-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach unten verschoben werden soll.Ausprobieren »
e-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach rechts verschoben werden soll.Ausprobieren »
w-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach links verschoben werden soll.Ausprobieren »
ns-resizeDer Cursor zeigt einen bidirektionalen Größenänderungs-Cursor an.Ausprobieren »
ew-resizeDer Cursor zeigt einen bidirektionalen Größenänderungs-Cursor an.Ausprobieren »
ne-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach oben und rechts verschoben werden soll.Ausprobieren »
nw-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach oben und links verschoben werden soll.Ausprobieren »
se-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach unten und rechts verschoben werden soll.Ausprobieren »
sw-resizeDer Cursor zeigt an, dass eine Kante eines Rahmens nach unten und links verschoben werden soll.Ausprobieren »
nesw-resizeDer Cursor zeigt einen bidirektionalen Größenänderungs-Cursor an.Ausprobieren »
nwse-resizeDer Cursor zeigt einen bidirektionalen Größenänderungs-Cursor an.Ausprobieren »
zoom-inDer Cursor zeigt an, dass etwas vergrößert werden kann.Ausprobieren »
zoom-outDer Cursor zeigt an, dass etwas verkleinert werden kann.Ausprobieren »
grabDer Cursor zeigt an, dass etwas gegriffen werden kann.Ausprobieren »
grabbingDer Cursor zeigt an, dass ein Element gerade gezogen wird.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Barrierefreiheit und häufige Fallstricke

  • cursor ist ein Hinweis, keine Steuerung. Es ändert das Aussehen des Zeigers, niemals das Verhalten des Elements. Ein pointer-Cursor macht ein <div> nicht anklickbar, und not-allowed deaktiviert einen Button nicht – echtes Verhalten (ein onclick, das disabled-Attribut, ARIA-Rollen) ist weiterhin erforderlich.
  • Verlassen Sie sich nicht allein auf den Cursor, um deaktivierte oder beschäftigte Zustände anzuzeigen. Tastatur- und Touch-Nutzer sehen ihn niemals. Kombinieren Sie ihn mit sichtbarem Styling und den richtigen Attributen.
  • Vermeiden Sie cursor: none auf gewöhnlichen Seiten. Das Verstecken des Zeigers kann Nutzer einschränken, die ihn dann nicht mehr finden können. Reservieren Sie es für Vollbilderlebnisse (Spiele, Kioske), die ihren eigenen Zeiger verwalten.
  • Benutzerdefinierte Bilder können die Benutzerfreundlichkeit beeinträchtigen, wenn sie kontrastarm, zu groß oder mit einem falsch platzierten Hotspot versehen sind, sodass Nutzer leicht daneben klicken. Testen Sie vor hellen und dunklen Hintergründen.
  • cursor ist vererbbar, sodass ein auf einem Container gesetzter Wert auf dessen Kinder angewendet wird, es sei denn, diese überschreiben ihn.

Verwandte Eigenschaften

  • pointer-events — bestimmt, ob ein Element überhaupt auf den Zeiger reagiert.
  • user-select — steuert, ob Text ausgewählt werden kann (passt gut zu cursor: text / cursor: default).
  • :hover — ändert Stile, während der Zeiger über einem Element schwebt.
  • caret-color — gestaltet den blinkenden Texteingabe-Cursor, ein völlig anderer „Cursor".

Übung

Übung
Was legt die CSS-Eigenschaft 'cursor' im Webdesign fest?
Was legt die CSS-Eigenschaft 'cursor' im Webdesign fest?
Was this page helpful?