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沖突么?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
