CSS Cursors(光標(biāo))

CSS光標(biāo)屬性，用于在鼠標(biāo)移至某個(gè)區(qū)域或網(wǎng)頁上的鏈接時(shí)定義光標(biāo)類型（即鼠標(biāo)指針）。

改變光標(biāo)的外觀

瀏覽器通常將鼠標(biāo)指針顯示在網(wǎng)頁的任何空白部分上，帶手套的手顯示在任何鏈接或可單擊的項(xiàng)目上，將編輯光標(biāo)顯示在任何文本或文本字段上。使用CSS，您可以重新定義這些屬性以顯示各種不同的光標(biāo)。

h1 {
    cursor: move;
}
p {
    cursor: text;
}

下表演示了大多數(shù)瀏覽器將接受的不同光標(biāo)。將鼠標(biāo)指針放在輸出列中的“ TEST”鏈接上，以顯示該光標(biāo)。

查看	值	示例	查看
	default	a:hover{cursor:default;}	測試
	pointer	a:hover{cursor:pointer;}	測試
	text	a:hover{cursor:text;}	測試
	wait	a:hover{cursor:wait;}	測試
	help	a:hover{cursor:help;}	測試
	progress	a:hover{cursor:progress;}	測試
	crosshair	a:hover{cursor:crosshair;}	測試
	move	a:hover{cursor:move;}	測試
	url()	a:hover{cursor:url("custom.cur"), default;}	測試

查看更多光標(biāo)?

創(chuàng)建自定義光標(biāo)

也可以具有完全自定義的光標(biāo)。

cursor屬性處理用戶定義的光標(biāo)值的逗號分隔列表，后跟通用光標(biāo)。如果第一個(gè)光標(biāo)指定不正確或找不到，則將使用逗號分隔列表中的下一個(gè)光標(biāo)，依此類推，直到找到可用的光標(biāo)為止。

如果沒有用戶定義的光標(biāo)有效或不受瀏覽器支持，則將使用列表末尾的通用光標(biāo)。

a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

在上面的示例中custom.gif，custom.cur是自定義光標(biāo)文件，已上傳到您的服務(wù)器空間，并且default是通用光標(biāo)，如果自定義光標(biāo)丟失或查看器的瀏覽器不支持它，則將使用該通用光標(biāo)。

這是自定義光標(biāo)的現(xiàn)場演示。