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

Yu_Huang 發(fā)布于2019-08-30 13:59 / 1749人閱讀

摘要：前段時間在項目中遇到過自定義鼠標圖標這一需求。圖標的大小鼠標圖標的尺寸推薦，否則可能出現(xiàn)大小不一致問題。附上屬性值值描述需使用的自定義光標的。

前段時間在項目中遇到過 自定義鼠標圖標 這一需求。由于一般我們用的鼠標樣式大都是固定的幾種，而 自定義鼠標圖標 不是很常用到，所以對這一小知識點進行總結(jié)，以防忘記。

自定義鼠標圖標

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

css:{cursor:url("圖標路徑"),auot};
//IE，F(xiàn)F，chrome瀏覽器都可以

示例代碼：

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

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

圖標的格式

IE支持cur,ani,ico這三種格式，F(xiàn)F支持bmp,gif,jpg,cur,ico這幾種格式，不支持ani格式，也不支持gif動畫格式，因此一般將url引用的圖標存為ico或cur格式比較好。

圖標的大小

鼠標圖標的尺寸推薦32*32，否則可能出現(xiàn)大小不一致問題。

附上cursor屬性值

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