CSS Cursors(光標)

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

改變光標的外觀

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

示例h1?{

cursor:?move;

}

p?{

cursor:?text;

}測試看看?/?

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

查看值示例查看

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;}

創建自定義光標

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

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

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

提示：可以用于光標的標準格式是該.cur格式。但是，您可以使用在線免費提供的圖像轉換器軟件將諸如.jpg和的圖像轉換.gif為.cur格式。

示例a?{

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

}測試看看?/?

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

警告：如果要聲明自定義光標，則必須在列表末尾定義一個通用光標，否則該自定義光標將無法正確呈現。

這是自定義光標的現場演示。

注意： IE9和更早版本僅支持.cur靜態光標和.ani動畫光標的URL值。然而，瀏覽器如Firefox，Chrome和Safari瀏覽器有支持的.cur，.png，.gif和.jpg，但不會.ani。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。