CSS Cursors(光標)

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

改變光標的外觀

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

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

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

查看	值	示例	查看
	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;}	測試

查看更多光標?

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

也可以具有完全自定義的光標。

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

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

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

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

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