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;

}測(cè)試看看?/?

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

查看值示例查看

defaulta:hover{cursor:default;}

pointera:hover{cursor:pointer;}

texta:hover{cursor:text;}

waita:hover{cursor:wait;}

helpa:hover{cursor:help;}

progressa:hover{cursor:progress;}

crosshaira:hover{cursor:crosshair;}

movea:hover{cursor:move;}

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

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

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

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

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

提示：可以用于光標(biāo)的標(biāo)準(zhǔn)格式是該.cur格式。但是，您可以使用在線免費(fèi)提供的圖像轉(zhuǎn)換器軟件將諸如.jpg和的圖像轉(zhuǎn)換.gif為.cur格式。

示例a?{

cursor:?url("custom.gif"),?url("custom.cur"),?default;

}測(cè)試看看?/?

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

警告：如果要聲明自定義光標(biāo)，則必須在列表末尾定義一個(gè)通用光標(biāo)，否則該自定義光標(biāo)將無法正確呈現(xiàn)。

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

注意： IE9和更早版本僅支持.cur靜態(tài)光標(biāo)和.ani動(dòng)畫光標(biāo)的URL值。然而，瀏覽器如Firefox，Chrome和Safari瀏覽器有支持的.cur，.png，.gif和.jpg，但不會(huì).ani。

總結(jié)

以上是生活随笔為你收集整理的css中光标的设置,CSS Cursors(光标)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。