So verwenden Sie das CSS-Cursor-Attribut-CSS-Tutorial-php.cn

So verwenden Sie das CSS-Cursor-Attribut

青灯夜游

Freigeben： 2019-05-28 12:03:00

Original

2880 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!