English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS cursor property specifies the type of cursor to be displayed when the pointer is placed over an element.
The following table provides usage descriptions and version history of this property, as well as the syntax for using it in JavaScript scripts.
| Default Value: | Gebräuchlich |
|---|---|
| Applies to: | All Elements |
| Inheritance: | Yes |
| Animated by: | No.See also Animation Properties. |
| Version: | CSS 2、3 |
| JavaScript Syntax: | object.style.cursor="context-menu" |
Verwendungssyntax des Cursors
Die Syntax dieses Attributes ist wie folgt: context-cursor: [url(Adresse des Cursordateis)], 0 oder mehr Male | auto | default | none |-menu | help | pointer | progress | wait | cell | crosshair | text | vertical text |-alias | copy | move | no-drop | not e-allowed | grab | grabbing |-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | row ew-resize | w-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row all-resize |-scroll | zoom-in | zoom
out | initial | inherit
Beispiel1 h
{
cursor: url("custom.gif"), url("custom.cur"), default;
cursor: copy;
p {
cursor: url("custom.gif"), url("custom.cur"), default;
cursor: help;
a {
cursor: url("custom.gif"), url("custom.cur"), default;}/Testen Sie es heraus‹›
cursor-Attribut wird verwendet, um eine Liste von benutzerdefinierten Cursorwerten durch Komma getrennt zu spezifizieren, gefolgt von „Universal Cursor“. Das bedeutet, wenn der erste Cursor falsch spezifiziert ist oder nicht gefunden wird, wird der nächste Cursor in der Liste verwendet, bis ein verfügbarer Cursor gefunden wird.Wenn kein benutzerdefinierter Cursor gültig ist oder vom Browser nicht unterstützt wird, wird der universelle Cursor am Ende der Liste verwendet.
Attributwerte
| Die folgende Tabelle beschreibt die Werte dieses Attributes. | Wert | Betrachten |
|---|---|---|
| Beschreibung | ||
| Gebräuchlich | auto | |
| Der Browser bestimmt basierend auf dem aktuellen Kontext, welchen Cursor angezeigt werden soll. Zum Beispiel, wenn Text auf Text gehovert wird. Dies ist der Standardwert. | default | |
| Die Standardcursor der Plattform, unabhängig vom Kontext, ist in der Regel ein Pfeil. | none | |
| Es wird kein Cursor dargestellt. | initial | |
| Setzt diesen Attributwert auf seinen Standardwert. | inherit | |
| Verknüpft die Elemente mit den Attributwerten des Cursor der übergeordneten Elemente, wenn spezifiziert. | ||
| context-menu | Zeigt an, dass ein Kontextmenü verfügbar ist. | |
| help | Hilfreich | |
| pointer | Cursor, der einen Link anzeigt, normalerweise eine Hand mit ausgestrecktem Zeigefinger. | |
| progress | Fortschrittsindikator. Das Programm führt einige Bearbeitungen aus, aber der Benutzer kann dennoch mit der Oberfläche interagieren (unterschiedlich von wait). | |
| wait | Bedeutet, dass das Programm beschäftigt ist und der Benutzer warten sollte. | |
| Auswahlcursor | ||
| cell | Bedeutet, dass eine Zelle (oder eine Gruppe von Zellen) ausgewählt werden kann. | |
| crosshair | Ein einfaches Kreuz. | |
| text | Bedeutet, dass der auswählbare Text, normalerweise ein Balken, ist. | |
| vertical-text | Bedeutet, dass vertikalen Text, d.h. horizontalen Balken, ausgewählt werden kann. | |
| Drag-and-Drop-Cursor | ||
| alias | Bedeutet, dass ein Alias oder ein Kurzwahlverweis erstellt werden soll. | |
| copy | Bedeutet, dass bestimmte Inhalte kopiert werden können. | |
| move | Bedeutet, dass sich ein gehovertes Objekt bewegen kann. | |
| no-drop | Bedeutet, dass das verschobene Element nicht an der aktuellen Position abgelegt werden kann. | |
| not-allowed | Bedeutet, dass etwas nicht abgeschlossen werden kann. | |
| Zoom- und Scrollcursor | ||
| all-scroll | Bedeutet, dass man entlang jeder Richtung scrollen kann (Verschieben). | |
| col-resize | Zeigt an, dass die Größe einer Spalte horizontal angepasst werden kann. | |
| row-resize | Zeigt an, dass die Größe einer Zeile vertikal angepasst werden kann. | |
| n-resize | Zeigt an, dass einige Kanten nach oben bewegt werden müssen (Norden). | |
| e-resize | Zeigt an, dass einige Kanten nach rechts bewegt werden müssen (Osten). | |
| s-resize | Zeigt an, dass einige Kanten nach unten bewegt werden müssen (Süden). | |
| w-resize | Zeigt an, dass einige Kanten nach links bewegt werden müssen (Westen). | |
| ne-resize | Zeigt an, dass einige Kanten nach oben und nach rechts bewegt werden müssen (Norden)./Osten). | |
| nw-resize | Zeigt an, dass einige Kanten nach oben bewegt werden müssen (Norden)./West). | |
| se-resize | Zeigt an, dass einige Kanten nach links bewegt werden müssen (Süden)./Osten). | |
| sw-resize | Zeigt an, dass einige Kanten nach oben bewegt werden müssen (Süden)./West). | |
| ew-resize | Zeigt einen Cursor an, der in beide Richtungen angepasst werden kann. | |
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| Zoomcursor | ||
| zoom-in | Bedeutet, dass bestimmte Inhalte vergrößert werden können. | |
| zoom-aus | Bedeutet, dass bestimmte Inhalte verkleinert werden können. | |
| griffen | Bedeutet, dass etwas ergriffen werden kann (verschieben, um zu bewegen). | |
| griffend | Bedeutet, dass etwas ergriffen wurde. | |
Kompatibilität der Cursor-Eigenschaft der Browser; die Zahlen in der Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.
|
Siehe Anleitung:CSS Cursor.