CSS游標cursor，csscursor

CSS游標cursor，csscursor
×目錄[1]定義 [2]標準樣式 [3]拓展樣式 [4]私人樣式 [5]定義樣式 [6]常見應用前面的話

　　在瀏覽器中，游標對於提供互動反饋很有用。通過在不同的情境中改變游標，就能賦予其不同的含義。

 

定義

　　cursor游標

　　值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress]] | inherit

　　初始值: auto

　　應用於: 所有元素

　　繼承性: 有

 

標準樣式

　　CSS2提供了相對較少的選擇

url: 自訂游標的URLdefault: 預設游標，通常是一個箭頭auto: 瀏覽器自動識別的游標crosshair : 十字線pointer: 手型指標move: 移動指標e-resize: 向東移動指標ne-resize: 向東北移動指標nw-resize: 向西北移動指標n-resize: 向北移動指標se-resize: 向東南移動指標sw-resize: 向西南移動指標s-resize: 向南移動指標w-resize: 向西移動指標text: 文本指標wait: 指示程式正忙help: 協助指標

拓展樣式

　　CSS3增加了更多的cursor的樣式值

　　[注意]所有拓展樣式IE7-瀏覽器都不支援

cursor:none (not IE8, Safari)cursor:context-menu (not Safari,Firefox,Chrome)cursor:cell (not Safari)cursor:alias (not Safari)cursor:copy (not IE,Safari)cursor:grab (not IE,Safari,Chrome)cursor:grabbing (not IE,Safari,Chrome)cursor:zoom-in (not IE,Safari)cursor:zoom-out (not IE,Safari)cursor:vertical-textcursor:no-dropcursor:not-allowedcursor:all-scrollcursor:ew-resizecursor:ns-resizecursor:nesw-resizecursor:nwse-resizecursor:col-resizecursor:row-resize

私人樣式

　　有些瀏覽器還提供了增加瀏覽器首碼的私人樣式

　　[注意]safari將-webkit-grab和-webkit-grabbing都解釋為default

cursor:-webkit-grab; cursor: -moz-grab;cursor:-webkit-grabbing; cursor: -moz-grabbing;cursor:-webkit-zoom-in; cursor: -moz-zoom-in;cursor:-webkit-zoom-out; cursor: -moz-zoom-out;    

自訂樣式

　　所有瀏覽器都支援使用尾碼名為.cur的檔案，chrome、firefox、safari還支援使用普通圖片製作游標

　　[注意]使用URL自訂樣式，後面必須跟有一個逗號和某個通用關鍵字

//錯誤cursor: url('m.cur');//正確cursor: url('m.cur'),auto;

常見應用

　　連結的預設游標是手型指標pointer，通過游標的變化可以讓訪問者清楚的知道該元素是可點擊的

　　元素的title屬性用來提供元素的額外資訊，配合help游標可以得到更好的表現方式

span[title]{    cursor: help;    border-bottom: 1px solid gray;}

<div><span title="Cascading Style Sheets">CSS</span> is much too interesting</div>