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
/* 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 Listeurl(), 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
Der plattformabhängige Standardcursor. Typischerweise ein Pfeil. none
Es wird kein Cursor gerendert. Links & Status context-menu
Ein Kontextmenü ist verfügbar. help
Hilfeinformationen sind verfügbar. pointer
Der Cursor ist ein Zeiger, der auf einen Link hinweist. Typischerweise ein Bild einer zeigenden Hand. progress
Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Benutzeroberfläche interagieren (im Gegensatz zu wait
).wait
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
Die Tabellenzelle oder ein Set von Zellen kann ausgewählt werden. crosshair
Kreuzcursor, der häufig zur Auswahl in einem Bitmap verwendet wird. text
Der Text kann ausgewählt werden. Typischerweise die Form eines I-Balkens. vertical-text
Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitlichen I-Balkens. Ziehen & Ablegen alias
Es soll ein Alias oder eine Verknüpfung erstellt werden. copy
Etwas soll kopiert werden. move
Etwas soll verschoben werden. no-drop
Ein Element darf nicht an der aktuellen Position abgelegt werden.
Firefox-Bug 275173: Unter Windows und macOS istno-drop
dasselbe wienot-allowed
.not-allowed
Die angeforderte Aktion wird nicht durchgeführt. grab
Etwas kann gegriffen werden (zu bewegt gezogen werden). grabbing
Etwas wird gegriffen (zum Bewegen gezogen). Größenänderung & Scrollen all-scroll
Etwas kann in jede Richtung gescrollt werden (verschoben).
Firefox-Bug 275174: Unter Windows istall-scroll
dasselbe wiemove
.col-resize
Das Element/Die Spalte kann horizontal skaliert werden. Oft als nach links und rechts zeigende Pfeile mit einer dazwischenliegenden vertikalen Linie dargestellt. row-resize
Das Element/Die Zeile kann vertikal skaliert werden. Oft als nach oben und unten zeigende Pfeile mit einer dazwischenliegenden horizontalen Linie dargestellt. n-resize
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 sindn-resize
unds-resize
gleichns-resize
.e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Bidirektionaler Skalierungscursor. ns-resize
nesw-resize
nwse-resize
Zoomen zoom-in
Etwas kann vergrößert (vergrößert) oder verkleinert werden.
zoom-out
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben, aber mit absoluten <url> Werten |
Animationstyp | diskret |
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
.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
pointer-events
<url>
Typ- SVG
cursor
Attribut