css cursor url用法格式:css:{cursor:url('圖標路徑'),auto;} //IE,FF,chrome瀏覽器都可以
實例代碼:html{cursor: url("http://ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}
解析:前面的url是自定義鼠標圖標路徑,第2個參數auto是css標准的cursor樣式,可換成其它屬性(如pointer/default等)!
(注釋:w3school推薦第2個參數必須定義一種普通的光標,以防URL 定義的可用光標使可備用!另外IE下面可以省略第2個參數)
自定義鼠標顯示圖標,需注意下面幾個問題
圖標的格式:
IE支持cur,ani,ico這三種格式,FF支持bmp,gif,jpg,cur,ico這幾種格式,不支持ani格式,也不支持gif動畫格式,因此來說一般將url引用的圖片存為ico或cur格式比較好!
圖標的大小:
鼠標圖片的尺寸推薦尺寸是32*32,否則可能會導致圖標大小不一致的問題!
另外對於在瀏覽器中鼠標圖片不顯示的問題,問題大多出在對鼠標圖片URL路徑的引用上, 可以分別嘗試下絕對和相對路徑的引用。
最后附上cursor屬性可能的值:(所有主流瀏覽器都支持下列 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 | 此光標指示可用的幫助(通常是一個問號或一個氣球)。 |