如何自定義滑鼠圖標

在一些網頁應用中，有自定義滑鼠圖標 這一需求。由於一般我們用的滑鼠樣式大都是固定的幾種，而 自定義滑鼠圖標 不是很常用到，所以對這一小知識點進行總結，以防忘記。

自定義滑鼠圖標

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

css cursor url的用法格式：

css:{cursor:url("圖標路徑"),auto};
//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默認。瀏覽器設置的游標crosshaid游標呈現十字線poniter游標呈現為只是鏈接的指針（一隻手）move此游標只是某對象可以被移動e-resize此游標指示就行框的邊緣可以被向右（東）移動ne-resize此游標指示就行框的邊緣可以被向上以及向右移動（北/東）nw-resize此游標指示矩形框的邊緣可被向上及向左移動（北/西）。n-resize此游標指示矩形框的邊緣可被向上（北）移動。se-resize此游標指示矩形框的邊緣可被向下及向右移動（南/東）。sw-resize此游標指示矩形框的邊緣可被向下及向左移動（南/西）。s-resize此游標指示矩形框的邊緣可被向下移動（北/西）。w-resize此游標指示矩形框的邊緣可被向左移動（西）。text此游標指示文本wait此游標指示程序正忙（通常一直表或者沙漏）help此游標指示可用的幫助（通常是一個問號或氣球）

大家可以看一下我做好了的效果，效果圖https://www.geekjc.com/photo/5b462cf879e2a51eb2ae479c ，點擊圖片，滑鼠放上去，可以看到滑鼠自定義的效果。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！