Wie ändert die Cursoreigenschaft die Form des Cursors? (Ausführliche Erklärung mit Bildern und Text)

In diesem Artikel wird Ihnen die Methode zum Ändern der Cursorform mit dem Cursor-Attribut vorgestellt, damit Sie die meisten häufig verwendeten Cursorformen verstehen, die mit dem Cursor-Attribut festgelegt werden können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Schauen wir uns zunächst an, wie das Cursor-Attribut die Cursorform ändert.

Grundlegende Syntax des CSS3-Cursor-Attributs:

cursor: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 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 | grab | grabbing ] ];

Hinweis:

1. Cursor-Attribut gilt für alle Elemente; Funktioniert nur auf Geräten mit Zeigegeräten (z. B. Mäusen); auf Touch-Geräten hat es keine Auswirkung.

3. Nicht alle Browser unterstützen alle Attributwerte des Cursor-Attributs und alle Attributwerte zeigen möglicherweise nicht unbedingt in allen Browsern und Betriebssystemen den gleichen Effekt an.

Sehen wir uns an, welche Art von Cursorform

durch diese Attributwerte des

Cursorattributs festgelegt werden kann.

Bildcursor (benutzerdefinierter Cursor)

:

Einer oder mehrere Komma-getrennte URL() zeigt auf Bilder, die als Cursor verwendet werden sollen. Der Benutzeragent ruft die Cursor-URL() vom ersten ab. Wenn der Benutzeragent den ersten Cursor der Cursorliste nicht verarbeiten kann, muss er versuchen, die Cursorliste usw. zu verarbeiten. Wenn der Benutzeragent keines der bereitgestellten Bilder verarbeiten kann (siehe Browser-Unterstützung), muss das Schlüsselwort „cursor“ verwendet werden. Ende der Liste. Die optionalen -Koordinaten identifizieren die genaue Position der Zeigerposition (d. h. den Hotspot) im Bild.

Nicht-URL-Standard-Cursor-Schlüsselwörter müssen am Ende der Fallback-Liste angegeben werden.

:

Einheitslose Zahlen kleiner als 32 verwenden, negative Werte sind nicht zulässig. Diese Werte geben die Koordinaten des Hotspots des Cursors an. Die erste Zahl ist die x-Koordinate und die zweite Zahl ist die y-Koordinate.

Beispiel:

cursor: url (some-cursor .png) 2 15, pointer;

Sehen wir uns ein Beispiel für einen Bildcursor an:

CSS-Code:

.custom {
  cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer;
}

Rendering:

Universeller Cursor (Pfeilform ) Standard: Standardcursor, normalerweise Pfeil.

auto: Bestimmt, welcher Cursor basierend auf dem aktuellen Kontext angezeigt werden soll. Beispielsweise wird Text angezeigt, wenn der Mauszeiger über den Text bewegt wird.

none: Der Cursor für das Element wird nicht angezeigt.

Beispiel:

.auto {
  cursor: auto;
}

.default {
  cursor: default;
}

.none {
  cursor: none;
}

Link- und StatuscursorKontext -menu: Für das Objekt unter dem Cursor steht ein Kontextmenü zur Verfügung. Wird normalerweise als Pfeil mit einer kleinen menüähnlichen Grafik daneben dargestellt.

Nur ​​IE 10 und höher implementieren diese Funktion unter Windows.

Hilfe: Dieser Cursor erscheint normalerweise als Fragezeichen oder Sprechblase. Es zeigt an, dass Hilfe für das Objekt unter dem Cursor verfügbar ist.

Zeiger: Der Cursor ist der Zeiger, der auf den Link zeigt.

Fortschritt: Fortschrittsanzeige. Zeigt an, dass das Programm eine Verarbeitung ausführt. Der Unterschied zu „wait“ besteht jedoch darin, dass der Benutzer weiterhin mit dem Programm interagieren kann. Wird oft als sich drehender Wasserball oder als Pfeil mit einer Uhr oder Sanduhr dargestellt.

Warten: Dieser Cursor wird normalerweise als Uhr oder Sanduhr dargestellt. Es zeigt an, dass das Programm beschäftigt ist und der Benutzer warten sollte.

Beispiel:

.context-menu {
  cursor: context-menu;
}

.help {
  cursor: help;
}

.pointer {
  cursor: pointer;
}

.progress {
  cursor: progress;
}

.wait {
  cursor: wait;
}

Cursor auswählenZelle: Dieser Cursor ist normalerweise präsentiert Es ist ein fettes Pluszeichen mit einem Punkt in der Mitte. Es zeigt an, dass eine Einheit oder eine Gruppe von Einheiten ausgewählt werden kann.

Fadenkreuz: Ein einfaches Fadenkreuz (z. B. ein kurzes Liniensegment ähnlich dem „+“-Symbol). Wird normalerweise zur Darstellung eines zweidimensionalen Bitmap-Auswahlmodus verwendet.

Text:

Der Cursor erscheint normalerweise als vertikaler I-Träger. Benutzerprogramme können automatisch einen horizontalen I-Träger/Cursor für vertikalen Text mit vertikalem Text (z. B. dasselbe wie ein Schlüsselwort) oder einen beliebigen abgewinkelten I-Träger/Cursor für Text anzeigen, der in einem bestimmten Winkel gerendert wird. Es stellt Text dar, der ausgewählt werden kann.

vertikaler Text: Dieser Cursor wird normalerweise als horizontaler I-Träger gerendert. Es stellt vertikalen Text dar, der ausgewählt werden kann.

Beispiel:

.cell {
  cursor: cell;
}

.crosshair {
  cursor: crosshair;
}

.text {
  cursor: text;
}

.vertical-text {
  cursor: vertical-text;
}

Drag-and-Drop-CursorAlias: Dieser Cursor Wird normalerweise als Pfeil mit einem kleinen gebogenen Pfeil daneben dargestellt. Es stellt einen bestimmten Alias/eine bestimmte Verknüpfung dar, die erstellt werden soll.

Kopieren: Dieser Cursor erscheint normalerweise als Pfeil mit einem kleinen Pluszeichen daneben. Es weist darauf hin, dass etwas kopiert werden soll.

Verschieben: Zeigt an, dass etwas verschoben werden soll. Die Art und Weise, wie dieser Cursor gerendert wird, hängt vom Browser ab, wie in der Beschreibung oben beschrieben. Es erscheint normalerweise als Vier-Wege-Pfeil oder als handähnliche Form.

no-drop：此光标通常呈现为手形或指针，带有一个小圆圈，并带有一条直线。它表示无法在当前光标位置删除拖动的项目。

not-allowed：此光标通常呈现为一个圆圈，并带有一条直线。它表示不会执行请求的操作。

例：

.alias {
  cursor: alias;
}

.copy {
  cursor: copy;
}

.move {
  cursor: move;
}

.no-drop {
  cursor: no-drop;
}

.not-allowed {
  cursor: not-allowed;
}

缩放光标：

zoom-in（放大）、zoom-out（缩小）：

表示某些内容可以放大或缩小，并且通常在玻璃中心呈现为带有“+”或“ - ”的放大镜。

例：

.zoom-in {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.zoom-out {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

抓取光标

grab 、grabbing：

表示可以抓取元素（拖动以移动）。grab是一只开放的手“准备拖动”，并且dragging是一只看起来像抓住东西的“闭合”手。

例：

.grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

缩放和滚动游标

e-resize，n-resize，ne-resize，nw-resize，s-resize，se-resize，sw-resize，w-resize
表示要移动某些边缘。例如，se-resize当运动从开始使用光标东南部盒子的角落。

ew-resize，ns-resize，nesw-resize，nwse-resize
表示双向调整大小游标。这些光标类型通常在不同方向上呈现为双向箭头。

col-resize：
此光标通常呈现为左右箭头，并用垂直条分隔它们。它表示可以水平调整项目/列的大小。它类似于您在MS Excel等程序中看到的光标。

row-resize：
此光标通常呈现为向上和向下的箭头，水平条将它们分开。它表示可以垂直调整项目/行的大小。它类似于您在MS Excel等程序中看到的光标。

all-scroll：
此光标通常呈现为向上，向下，向左和向右的箭头，中间有一个点。它表示可以向任何方向滚动某些内容。

例：

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.e-resize {
  cursor: e-resize;
}

.se-resize {
  cursor: se-resize;
}

.s-resize {
  cursor: s-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.w-resize {
  cursor: w-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.se-resize {
  cursor: se-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.col-resize {
  cursor: col-resize;
}

.row-resize {
  cursor: row-resize;
}

.all-scroll {
  cursor: all-scroll;
}

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

Das obige ist der detaillierte Inhalt vonWie ändert die Cursoreigenschaft die Form des Cursors? (Ausführliche Erklärung mit Bildern und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!