Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie den Cursorstil in CSS

So ändern Sie den Cursorstil in CSS

青灯夜游
青灯夜游Original
2019-05-31 13:55:045934Durchsuche

So ändern Sie den Cursorstil in CSS

In CSS wird das Cursor-Attribut verwendet, um die Cursorform zu definieren, die verwendet wird, wenn der Mauszeiger innerhalb der Grenze eines Elements platziert wird. Wir können den Stil des Mauszeigers (Zeiger) festlegen das Cursor-Attribut.

Syntax des Cursor-Attributs:

cursor: auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)

Mögliche Attributwerte:

● url: Benutzerdefinierte Cursor-URL, die verwendet werden soll. Hinweis: Definieren Sie immer einen normalen Cursor am Ende dieser Liste, falls kein durch URL definierter Cursor verfügbar ist.

● Standard: Der Standardcursor (normalerweise ein Pfeil)

● Auto: Standard. Der vom Browser gesetzte Cursor.

● Fadenkreuz: Der Cursor wird als Fadenkreuz dargestellt.

●Zeiger: Der Cursor erscheint als Zeiger (eine Hand) und zeigt einen Link an.

●Verschieben: Dieser Cursor zeigt an, dass ein Objekt verschoben werden kann.

● e-Resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach rechts (Osten) verschoben werden kann.

● ne-resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach rechts (Norden/Osten) verschoben werden kann.

● nw-resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach links (Norden/Westen) verschoben werden kann.

● n-resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben (Norden) verschoben werden kann.

● Größe ändern: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach rechts (Süden/Osten) verschoben werden kann.

● sw-resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und links (Süden/Westen) verschoben werden kann.

● S-Resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten (Norden/Westen) verschoben werden kann.

● w-resize: Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach links (Westen) verschoben werden kann.

● Text: Dieser Cursor zeigt Text an.

● Warten: Dieser Cursor zeigt an, dass das Programm beschäftigt ist (normalerweise eine Uhr oder eine Sanduhr).

● Hilfe: Dieser Cursor zeigt verfügbare Hilfe an (normalerweise ein Fragezeichen oder eine Sprechblase).

Allgemeine Cursorbeschreibung

1, div{ cursor:default }Standardmäßiger normaler Mauszeiger

2, div{ cursor:hand } und div{ cursor:text } Textauswahl Effekt

3. div{ cursor:move }Bewegungsauswahleffekt

4. div{ cursor:pointer }Fingerform-Link-Auswahleffekt

5 > div{ cursor:url(url图片地址) }

Cursor-Stil-Renderings

So ändern Sie den Cursorstil in CSS

Mauszeigerbeschreibung

Cursor wird auf gesetzt oder abgerufen Objekt Welche systemdefinierte Cursorform der bewegte Mauszeiger annimmt.

Es ist üblich, den Mauszeigerstil zu steuern und festzulegen, aber missbrauchen Sie den Cursor nicht und legen Sie nicht einfach ein benutzerdefiniertes Bild als Mausstil fest. Dadurch wird die Webseite kompliziert und für den Benutzer inkonsistent Denken Sie daran, den Cursor mit Vorsicht zu verwenden.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Cursorstil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn