css cursor url用法格式詳解

WBOY
發布: 2016-10-10 11:40:53
原創
1789 人瀏覽過

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 此遊標指示可用的幫助(通常是一個問號或一個氣球)。
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板