首頁 > web前端 > css教學 > 主體

css cursor屬性怎麼用

青灯夜游
發布: 2019-05-28 12:03:00
原創
2903 人瀏覽過

css cursor屬性用於指定要顯示的遊標的類型(形狀),定義了滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀。所有主流瀏覽器都支援 cursor 屬性。

css cursor屬性怎麼用

css cursor屬性怎麼用?

cursor 屬性規定要顯示的遊標的類型(形狀)。

可能的屬性值:

● url:需使用的自訂遊標的 URL。注意:請在此清單的末端始終定義一種普通的遊標,以防沒有由 URL 定義的可用遊標。

● default:預設遊標(通常是一個箭頭)

● auto:預設。瀏覽器設定的遊標。

● crosshair:遊標呈現為十字線。

● pointer:遊標呈現為指示連結的指標(一隻手)

● move:此遊標指示某物件可被移動。

● e-resize:此遊標指示矩形框的邊緣可被向右(東)移動。

● ne-resize:此遊標指示矩形框的邊緣可被向上及向右移動(北/東)。

● nw-resize:此遊標指示矩形框的邊緣可被向上及向左移動(北/西)。

● n-resize:此遊標指示矩形框的邊緣可被向上(北)移動。

● se-resize:此遊標指示矩形框的邊緣可被向下及向右移動(南/東)。

● sw-resize:此遊標指示矩形框的邊緣可被向下及向左移動(南/西)。

● s-resize:此遊標指示矩形框的邊緣可被向下移動(北/西)。

● w-resize:此遊標指示矩形框的邊緣可被向左移動(西)。

● text:此遊標指示文字。

● wait:此遊標指示程式正忙碌(通常是一隻表或沙漏)。

● help:此遊標指示可用的幫助(通常是一個問號或一個氣球)。

說明:此屬性定義了滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀(不過 CSS2.1 沒有定義由哪個邊界決定這個範圍)。    

註解:所有主流瀏覽器都支援 cursor 屬性。 Opera 9.3 和 Safari 3 不支援 url 值。任何版本的 Internet Explorer (包括 IE8)都不支援屬性值 "inherit"。

css cursor屬性 範例

<!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>
登入後複製

以上是css cursor屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板