Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie das CSS-Cursor-Attribut

青灯夜游
Freigeben: 2019-05-28 12:03:00
Original
2902 Leute haben es durchsucht

Das CSS-Cursor-Attribut wird verwendet, um den Typ (die Form) des anzuzeigenden Cursors anzugeben und die Cursorform zu definieren, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird. Alle gängigen Browser unterstützen das Cursor-Attribut.

So verwenden Sie das CSS-Cursor-Attribut

Wie verwende ich das CSS-Cursor-Attribut?

Das Cursor-Attribut gibt den Typ (Form) des anzuzeigenden Cursors an.

Mögliche Attributwerte:

● URL: Die URL des zu verwendenden benutzerdefinierten Cursors. 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).

Beschreibung: Dieses Attribut definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird (CSS2.1 definiert jedoch nicht, welche Grenzen diesen Bereich bestimmen).

Hinweis: Alle gängigen Browser unterstützen das Cursor-Attribut. Opera 9.3 und Safari 3 unterstützen keine URL-Werte. Der Attributwert „inherit“ wird in keiner Version von Internet Explorer, einschließlich IE8, unterstützt.

Beispiel für ein CSS-Cursor-Attribut

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
	</head>

	<body>
		<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
		<span style="cursor:auto">Auto</span><br />
		<span style="cursor:crosshair">Crosshair</span><br />
		<span style="cursor:default">Default</span><br />
		<span style="cursor:pointer">Pointer</span><br />
		<span style="cursor:move">Move</span><br />
		<span style="cursor:e-resize">e-resize</span><br />
		<span style="cursor:ne-resize">ne-resize</span><br />
		<span style="cursor:nw-resize">nw-resize</span><br />
		<span style="cursor:n-resize">n-resize</span><br />
		<span style="cursor:se-resize">se-resize</span><br />
		<span style="cursor:sw-resize">sw-resize</span><br />
		<span style="cursor:s-resize">s-resize</span><br />
		<span style="cursor:w-resize">w-resize</span><br />
		<span style="cursor:text">text</span><br />
		<span style="cursor:wait">wait</span><br />
		<span style="cursor:help">help</span>
	</body>

</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Cursor-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage