cursor

Die cursor CSS-Eigenschaft legt den Mauszeiger fest, der angezeigt werden soll, wenn der Mauszeiger über einem Element schwebt.

Die Cursor-Einstellung sollte die Benutzer über die Mausoperationen informieren, die an der aktuellen Position durchgeführt werden können, einschließlich: Textauswahl, Aktivierung von Hilfe- oder Kontextmenüs, Kopieren von Inhalten, Größenänderung von Tabellen und so weiter. Sie können entweder den Typ des Cursors mit einem Schlüsselwort angeben oder ein spezifisches Icon laden (mit optionalen Fallback-Bilder und einem obligatorischen Schlüsselwort als finalen Fallback).

Probieren Sie es aus

cursor: help;
cursor: wait;
cursor: crosshair;
cursor: not-allowed;
cursor: zoom-in;
cursor: grab;
<section class="default-example container" id="default-example">
  <div id="example-element">
    Move over this element to see the cursor style.
  </div>
</section>
#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

Syntax

css
/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Die cursor-Eigenschaft wird als Null oder mehr <url>-Werte angegeben, getrennt durch Kommas, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jedes <url> sollte auf eine Bilddatei verweisen. Der Browser wird versuchen, das erste angegebene Bild zu laden, falles das nicht gelingt, fällt er auf das nächste zurück und letztlich auf den Schlüsselwortwert zurück, wenn keine Bilder geladen werden konnten (oder wenn keine angegeben wurden).

Jedes <url> kann optional von einem Paar von Leerzeichen getrennten Zahlen gefolgt werden, die die <x>- und <y>-Koordinaten des Hotspots des Cursors relativ zur oberen linken Ecke des Bildes festlegen.

Werte

<url> Optional

Eine url() oder eine durch Kommas getrennte Liste url(), url(), …, die auf eine Bilddatei zeigt. Mehr als ein <url> kann als Fallback angegeben werden, falls einige Cursorbildformate nicht unterstützt werden. Ein Nicht-URL-Fallback (eines oder mehrere der Schlüsselwortwerte) muss am Ende der Fallback-Liste stehen.

<x>, <y> Optional

Optionale x- und y-Koordinaten, die den Hotspot des Cursors angeben; die genaue Position innerhalb des Cursors, auf die gezeigt wird.

Die Zahlen sind in Einheiten von Bildpixeln. Sie sind relativ zur oberen linken Ecke des Bildes, die 0 0 entspricht, und werden innerhalb der Grenzen des Cursorbildes begrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und standardmäßig auf die obere linke Ecke des Bildes zurückgesetzt werden.

keyword

Ein Schlüsselwortwert muss angegeben werden, der entweder den zu verwendenden Cursor-Typ angibt oder den Fallback-Cursor, der verwendet wird, wenn alle angegebenen Symbole nicht geladen werden können.

Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Abgesehen von none, was bedeutet, dass kein Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können mit der Maus über die Zeilen der Tabelle fahren, um zu sehen, wie die verschiedenen Cursor-Schlüsselwortwerte heute in Ihrem Browser wirken.

Kategorie Schlüsselwort Beispiel Beschreibung
Allgemein auto Die Benutzeroberfläche (UA) bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z.B. entspricht text, wenn über Text geschwebt wird.
default weiter Pfeil, der nach oben und links zeigt Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.
none Es wird kein Cursor gerendert.
Links & Status context-menu weiter Pfeil, der nach oben und links zeigt, und ein Menü-Symbol teilweise verdeckt Ein Kontextmenü ist verfügbar.
help weiter Pfeil, der nach oben und links zeigt, neben einem Fragezeichen Hilfeinformationen sind verfügbar.
pointer rechte Hand mit einem nach oben zeigenden Zeigefinger Der Cursor ist ein Zeiger, der auf einen Link hinweist. Typischerweise ein Bild einer zeigenden Hand.
progress weiter Pfeil und Sanduhr Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Benutzeroberfläche interagieren (im Gegensatz zu wait).
wait Sanduhr Das Programm ist beschäftigt und der Benutzer kann nicht mit der Benutzeroberfläche interagieren (im Gegensatz zu progress). Manchmal ein Bild einer Sanduhr oder einer Uhr.
Auswahl cell weites Plus-Symbol Die Tabellenzelle oder ein Set von Zellen kann ausgewählt werden.
crosshair Plus-Symbol, bestehend aus zwei dünnen Linien. Kreuzcursor, der häufig zur Auswahl in einem Bitmap verwendet wird.
text vertikaler I-Balken Der Text kann ausgewählt werden. Typischerweise die Form eines I-Balkens.
vertical-text horizontaler I-Balken Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitlichen I-Balkens.
Ziehen & Ablegen alias weiter Pfeil, der nach oben und links zeigt, teilweise verdeckt ein kleines Ordnersymbol mit einem gebogenen Pfeil, der nach oben und rechts zeigt Es soll ein Alias oder eine Verknüpfung erstellt werden.
copy weiter Pfeil, der nach oben und links zeigt, teilweise verdeckt ein kleines Ordnersymbol mit einem Pluszeichen Etwas soll kopiert werden.
move Pluszeichen aus zwei dünnen Linien. Die vier Punkte sind kleine Pfeile, die nach außen zeigen Etwas soll verschoben werden.
no-drop Zeigersymbol und ein nicht erlaubtes Symbol Ein Element darf nicht an der aktuellen Position abgelegt werden.
Firefox-Bug 275173: Unter Windows und macOS ist no-drop dasselbe wie not-allowed.
not-allowed Nicht-erlauben-Symbol, ein Kreis mit einem Strich durch Die angeforderte Aktion wird nicht durchgeführt.
grab vollständig geöffnetes Handsymbol Etwas kann gegriffen werden (zu bewegt gezogen werden).
grabbing geschlossenes Handsymbol, von der Rückseite der Hand Etwas wird gegriffen (zum Bewegen gezogen).
Größenänderung & Scrollen all-scroll Symbol eines mittleren Punkts mit vier Dreiecken darum. Etwas kann in jede Richtung gescrollt werden (verschoben).
Firefox-Bug 275174: Unter Windows ist all-scroll dasselbe wie move.
col-resize col-resize.gif Das Element/Die Spalte kann horizontal skaliert werden. Oft als nach links und rechts zeigende Pfeile mit einer dazwischenliegenden vertikalen Linie dargestellt.
row-resize zwei schmale parallele horizontale Linien mit einem kleinen Pfeil nach oben und einem anderen nach unten Das Element/Die Zeile kann vertikal skaliert werden. Oft als nach oben und unten zeigende Pfeile mit einer dazwischenliegenden horizontalen Linie dargestellt.
n-resize dünner langer Pfeil, der nach oben zeigt Eine Kante soll bewegt werden. Beispielsweise wird der se-resize-Cursor verwendet, wenn die Bewegung von der süd-östlichen Ecke des Feldes startet.
In einigen Umgebungen wird ein gleichwertiger bidirektionaler Skalierungscursor angezeigt. Zum Beispiel sind n-resize und s-resize gleich ns-resize.
e-resize dünner langer Pfeil, der nach rechts zeigt
s-resize dünner langer Pfeil, der nach unten zeigt
w-resize dünner langer Pfeil, der nach links zeigt
ne-resize dünner langer Pfeil, der nach oben-rechts zeigt
nw-resize dünner langer Pfeil, der nach oben-links zeigt
se-resize dünner langer Pfeil, der nach unten-rechts zeigt
sw-resize dünner langer Pfeil, der nach unten-links zeigt
ew-resize dünner langer Pfeil, der nach links und rechts zeigt Bidirektionaler Skalierungscursor.
ns-resize dünner langer Pfeil, der nach oben und unten zeigt
nesw-resize dünner langer Pfeil, der nach oben-rechts und unten-links zeigt
nwse-resize dünner langer Pfeil, der nach oben-links und unten-rechts zeigt
Zoomen zoom-in Lupe mit einem Pluszeichen

Etwas kann vergrößert (vergrößert) oder verkleinert werden.

zoom-out Lupe mit einem Minuszeichen

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypdiskret

Formale Syntax

cursor = 
[ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Nutzungshinweise

Grenzwerte für die Symbolgröße

Obwohl die Spezifikation die Größe des cursor-Bildes nicht begrenzt, schränken Benutzeragenten sie gewöhnlich ein, um möglichem Missbrauch vorzubeugen. Beispielsweise sind die Cursorbilder in Firefox und Chromium standardmäßig auf 128x128 Pixel begrenzt, es wird jedoch empfohlen, die Cursorbildgröße auf 32x32 Pixel zu begrenzen. Cursoränderungen mit Bildern, die größer sind als die maximale von Benutzeragenten unterstützte Größe, werden im Allgemeinen einfach ignoriert.

Unterstützte Bilddateiformate

Benutzeragenten sind laut Spezifikation verpflichtet, PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus zu unterstützen, die eine natürliche Größe enthalten, sowie jedes andere nicht-animiertes Bilddateiformat, das sie für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen auch weitgehend das .cur-Dateiformat.

Die Spezifikation weist weiter darauf hin, dass Benutzeragenten sollten ebenfalls SVG v1.1-Dateien im sicheren animiertem Modus unterstützen, die eine natürliche Größe enthalten, zusammen mit jedem anderen animierten Bilddateiformat, das sie für Bilder in anderen Eigenschaften unterstützen. Benutzeragenten dürfen sowohl statische als auch animierte SVG-Bilder unterstützen, die keine natürliche Größe enthalten.

iPadOS

iPadOS unterstützt Zeigegeräte wie Trackpads und Mäuse. Standardmäßig wird der iPad-Cursor als Kreis angezeigt, und der einzige unterstützte Wert, der das Aussehen des Zeigers ändert, ist text.

Weitere Hinweise

Cursoränderungen, die sich mit Werkzeugleisten überschneiden, werden häufig blockiert, um Spoofing zu vermeiden.

Beispiele

Cursortypen einstellen

css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# cursor

Browser-Kompatibilität

Siehe auch