Was ist das Cursor-Attribut von CSS? Verwendung des Cursor-Attributs

Der Inhalt dieses Artikels soll Ihnen vorstellen, was das Cursorattribut von CSS ist. Verwendung des Cursor-Attributs. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst verstehen, was das Cursorattribut ist. Was macht es?

Das Cursor-Attribut ist das Cursor-Attribut in CSS. Es gibt den Typ des Mauszeigers an, der verwendet werden kann, wenn sich die Maus auf dem Anwendungselement befindet, d. h. den Typ (die Form) des Cursors angezeigt werden.

Wir können den Cursor über das Cursor-Attribut auf einen von vielen vordefinierten Cursortypen oder auf ein Bild setzen (wie im Beispiel unten).

Hinweis: Das Cursor-Attribut ist nur für Geräte mit Zeigegeräten (z. B. Mäuse) gültig. Es hat keine Auswirkungen auf Touch-Geräte.

Das Cursor-Attribut wird verwendet, um dem Benutzer visuelles Feedback und Hinweise zu geben, um bestimmte Funktionen auf dem Element bereitzustellen, was oft wichtig ist, um ein besseres Benutzererlebnis zu bieten.

Der in CSS definierte Cursorwert kann je nach Browser und Betriebssystem unterschiedliche Auswirkungen haben. Beispielsweise zeigen einige Browser (z. B. Firefox unter Windows 7) den Verschiebungscursor (normalerweise verwendet, um anzuzeigen, dass ein Element ziehbar ist) als Vier-Wege-Pfeil an, während andere Browser (z. B. Firefox unter Mac OS X) dies anzeigen Handcursor. Wenn Sie in diesem Fall möchten, dass der Cursor ein bestimmter Cursor ist, der in allen Browsern und auf allen Plattformen genau gleich aussieht, möchten Sie möglicherweise ein Bild anstelle des Standard-CSS-Schlüsselworts verwenden.

Offizielle Syntax

Syntax:

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

Anfänglich: Automatisch

Gilt für:Alle Elemente

Animation: Keine

Neue CSS3-Syntax:

In CSS3 wurden zusätzliche Werte und Optionen zum Cursor-Attribut hinzugefügt, schauen wir uns unten an:

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. Nicht alle Browser unterstützen alle oben genannten Werte und nicht alle Werte sehen in allen Browsern und Betriebssystemen gleich aus. .

2. Bildcursor (benutzerdefinierter Cursor)

: Referenzbild

Eine oder mehrere durch Kommas getrennte URL() zeigt auf das Bild, das als Cursor verwendet werden soll.

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

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

: Definieren Sie Koordinaten

mit Werten ohne Einheiten, diese Werte geben die Koordinaten des Cursor-Hotspots 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;

setzt den Hotspot des Cursors auf (2,15) Pixel, beginnend in der oberen linken Ecke (0,0).

Wenn nicht angegeben, werden die Koordinaten des Hotspots aus der Datei selbst gelesen (für CUR- und XBM-Dateien) oder auf die obere linke Ecke des Bildes gesetzt.

Sehen wir uns einen Bildcursor an:

3. Häufig verwendete Cursorformen

keine: Definieren Sie die Cursor wird nicht angezeigt

wird normalerweise als Pfeil dargestellt: Standard, Auto, Kontextmenü

wird normalerweise als Hand dargestellt: Zeiger, Greifen, Greifen, Hand

Hilfe : wird normalerweise als Fragezeichen oder Ballon dargestellt

Warten auf Laden: Fortschritt (drehender Wasserball oder Pfeil mit Uhr oder Sanduhr), warten (Uhr oder Sanduhr)

zeigt Richtung oder Bewegung an :
e- resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, ew-resize, ns-resize, nesw-resize, nwse- Größe ändern, Größe der Spalte ändern, Größe der Zeile ändern, All-Scroll, Verschieben

weist auf ein Verbot hin: No-Drop, nicht zulässig

Browser-Unterstützung

Die folgenden Versionen werden unterstützt:

* gibt ein erforderliches Präfix an.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Sie können ihn selbst kompilieren und die durch jeden Attributwert des Cursorattributs definierte Cursorform sehen. Ich hoffe, dass es für alle beim Lernen hilfreich sein wird. Weitere verwandte Video-Tutorials werden empfohlen: CSS3-Tutorial!

Das obige ist der detaillierte Inhalt vonWas ist das Cursor-Attribut von CSS? Verwendung des Cursor-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!