使用自定義的鼠標圖標 --- cursor url

前段時間在項目中遇到過 自定義鼠標圖標 這一需求。因爲通常咱們用的鼠標樣式大都是固定的幾種，而 自定義鼠標圖標 不是很經常使用到，因此對這一小知識點進行總結，以防忘記。

自定義鼠標圖標

自定義鼠標圖標 即 css cursor url的使用。

css cursor url的用法格式：

css:{cursor:url("圖標路徑"),auot};
//IE，FF，chrome瀏覽器均可以

示例代碼：

<style type="text/css">
        .btn{
            cursor: url("./img/pointer.jpg"),auto;
        }
</style>

解析：前面的url是自定義鼠標圖標的路徑，能夠爲相對/絕對路徑。第二個參數是css標準的cursor樣式。可換成其餘屬性（如pointer/default/等）

注意：w3school推薦第二個參數必須定義一個普通的光標，以防止url定義的光標有備用選項。另外，IE下第二個參數能夠省略。

自定義鼠標圖標，須要注意如下幾點

• 圖標的格式

IE支持cur,ani,ico這三種格式，FF支持bmp,gif,jpg,cur,ico這幾種格式，不支持ani格式，也不支持gif動畫格式，所以通常將url引用的圖標存爲ico或cur格式比較好。

• 圖標的大小

鼠標圖標的尺寸推薦32*32，不然可能出現大小不一致問題。

附上cursor屬性值

值	描述
url	需使用的自定義光標的URL。（註釋：請在此列表的末端必定一種普通的光標，以防沒有由URL定義的可用光標。）
default	默認光標(一般是一個箭頭)
auto	默認。瀏覽器設置的光標
crosshair	光標呈現十字線
pointer	光標呈現爲只是連接的指針（一隻手）
move	此光標只是某對象能夠被移動
e-resize	此光標指示就行框的邊緣能夠被向右（東）移動
ne-resize	此光標指示就行框的邊緣能夠被向上以及向右移動（北/東）
nw-resize	此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
n-resize	此光標指示矩形框的邊緣可被向上（北）移動。
se-resize	此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
sw-resize	此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
s-resize	此光標指示矩形框的邊緣可被向下移動（北/西）。
w-resize	此光標指示矩形框的邊緣可被向左移動（西）。
text	此光標指示文本
wait	此光標指示程序正忙（一般一直表或者沙漏）
help	此光標指示可用的幫助（一般是一個問號或氣球）