css Cursor:url()自定義滑鼠指標樣式為圖片

weixin_30488085發表於2020-04-06

css自定義滑鼠指標樣式為圖片Cursor:url()的使用,今天在專案中,要用到自定義滑鼠樣式,格式:

css:{cursor:url('絕對路徑的圖片(格式:cur,ico)'),-moz-zoom-out;}//FF下面

css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以

前面url是自定義滑鼠格式,影像的絕對路徑地址,後面的引數是css標準的cursor樣式,(IE下面可以不需要)

圖示的格式根據不同的瀏覽器來分:IE支援cur,ani,ico這三種格式,FF支援bmp,gif,jpg,cur,ico這幾種格式,不支援ani格式,也不支援gif動畫格式,因此來說一般將圖片存為cur或ico格式比較好,如果是ani格式的話,那麼可以在FF下面用jpg,gif,bmp來代替(cursor:url(.....ani),url(.....gif),auto)

還有幾個需要注意的地方:1.圖片地址為絕對路徑,2.圖片大小最好是32*32的大小,反正在各個瀏覽器下面解析的大小不一樣

Cursor:url()的使用:

cursor: url(),pointer;

url:需使用的自定義游標的 URL。圖片型別需要是.cur或.ani格式的。(這次專案中我是用的.ico格式,並沒有發現瀏覽器相容問題)

pointer: 預設的滑鼠游標樣式,當沒有找到可用的定義游標時會使用此游標。

最近專案中有用到設定滑鼠游標為自定義圖片的特效,在使用Cursor:url()的過程中遇到了很多問題。

問題一 瀏覽器不相容問題:

在FF火狐中可以很正常的顯示出來,而在IE中起初是顯示不出來,後來是滑鼠圖片大小過小的問題,在Google瀏覽器中滑鼠圖片的大小問題更加的突出——超級的大。

碰到的情況正好和baidu到的結果相反,很多朋友遇到的問題都是不相容FF瀏覽器。

對於在瀏覽器中滑鼠圖片不顯示的問題,問題大概出在對滑鼠圖片URL路徑的引用上。 可以分別嘗試下絕對和相對路徑的引用。

問題二 各瀏覽器間滑鼠圖片大小不一致問題:

這種問題應該和各瀏覽器間對Cursor圖片的解析有關係,起初我的滑鼠圖片大小是59*56的,後來把滑鼠圖片的尺寸改為32*32後,圖片大小不一致的問題就解決了。

(經測試發現,超過32*32尺寸,就會出現這種問題)

問題三 IE中使用Cursor URL()出現滑鼠閃動問題:

當對設定Cursor URL()的容器元素新增了Title或Alt時,就會出現這種現象。最後很無奈的把Title標籤去掉了。難道是因為在IE中Cursor會和Title、Alt衝突麼?

轉載於:https://www.cnblogs.com/cainiaoz/p/4323124.html

相關文章