cursor

語法:

cursor:[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing]

預設值auto

適用於:所有元素

繼承性:有

動畫性:否

計算值:指定值

取值:

<url>
使用絕對或者相對地址引入外部圖片作為光標形狀
<url> <x> <y>:
通過<x> <y>兩個值指定具體需要顯示的圖片位置。類似 <' background-position '>
auto:
使用者代理基於目前上下文決定光標形狀
default:
相關平台的預設光標形狀,通常為箭頭。
none:
沒有光標形狀

其他待完成...

說明:

設定或檢索在物件上移動的鼠標指針采用何種系統預定義的光標形狀。
  • 使用自訂圖片作為光標類型,IE, Opera只支援*.cur等特定的圖片格式;Firefox, Chrome, Safari既支援特定圖片類型也支援常見的*.png, *.gif, *.jpg等圖片格式。
  • cursor的屬性值可以是一個序列

    示例程式碼:

    :link,:visited{
    	cursor:url(example.svg#linkcursor),
    			url(hyper.cur),
    			url(hyper.png) 2 3,
    			pointer;
    }

    本例用來給所有的超連結定義光標類型,客戶端如果不支援SVG類型的光標,則使用下個"hyper.cur";如果cur類型也不支援,則使用下個"hyper.png";依次類推。

  • 對應的腳本特性為cursor

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0#1 2.0+ 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
none 6.0-8.0 2.0+ 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
9.0+
alias | cell | copy |
ew-resize | ns-resize |
nesw-resize |
nwse-resize |
context-menu
6.0-9.0 2.0+ 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
10.0+
zoom-in | zoom-out 6.0-11.0 2.0-23.0-moz- 4.0-36.0-webkit- 6.0-8.0-webkit- 15.0-23.0-webkit- 6.0-8.3 2.1-4.4.4 18.0-42.0
24.0+ 37.0+ 24.0+
grab | grabbing 6.0-11.0 2.0-27.0-moz- 4.0-22.0-webkit- 6.0-8.0-webkit- 15.0+ 6.0-8.3 2.1-4.4.4 18.0-42.0
28.0+ 23.0+
  1. 6.0-8.0不支援:url()的position位置,不支援除.cur之外的圖片格式。

示例: