您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > Cursor:url()的使用
Cursor:url()的使用
文章來源：365jz.com 點(diǎn)擊數(shù)：167 更新時間：2012-05-30 10:38 參與評論
今天在項目中，要用到自定義鼠標(biāo)樣式，格式：
css:{cursor:url('絕對路徑的圖片(格式：cur,ico)'),-moz-zoom-out;}//FF下面
css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以
css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以
前面url是自定義鼠標(biāo)格式，圖像的絕對路徑地址，后面的參數(shù)是css標(biāo)準(zhǔn)的cursor樣式，（IE下面可以不需要）
圖標(biāo)的格式根據(jù)不同的瀏覽器來分：IE支持cur,ani,ico這三種格式，F(xiàn)F支持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:需使用的自定義光標(biāo)的 URL。圖片類型需要是.cur或.ani格式的。(這次項目中我是用的.ico格式，并沒有發(fā)現(xiàn)瀏覽器兼容問題)
pointer: 默認(rèn)的鼠標(biāo)光標(biāo)樣式，當(dāng)沒有找到可用的定義光標(biāo)時會使用此光標(biāo)。
最近項目中有用到設(shè)置鼠標(biāo)光標(biāo)為自定義圖片的特效，在使用Cursor:url()的過程中遇到了很多問題。
問題一 瀏覽器不兼容問題：
在FF火狐中可以很正常的顯示出來，而在IE中起初是顯示不出來，后來是鼠標(biāo)圖片大小過小的問題，在Google瀏覽器中鼠標(biāo)圖片的大小問題更加的突出——超級的大。
碰到的情況正好和baidu到的結(jié)果相反，很多朋友遇到的問題都是不兼容FF瀏覽器。
對于在瀏覽器中鼠標(biāo)圖片不顯示的問題，問題大概出在對鼠標(biāo)圖片URL路徑的引用上。 可以分別嘗試下絕對和相對路徑的引用。
問題二 各瀏覽器間鼠標(biāo)圖片大小不一致問題：
這種問題應(yīng)該和各瀏覽器間對Cursor圖片的解析有關(guān)系，起初我的鼠標(biāo)圖片大小是59*56的，后來把鼠標(biāo)圖片的尺寸改為32*32后，圖片大小不一致的問題就解決了。
(經(jīng)測試發(fā)現(xiàn)，超過32*32尺寸，就會出現(xiàn)這種問題)
問題三 IE中使用Cursor URL()出現(xiàn)鼠標(biāo)閃動問題：
當(dāng)對設(shè)置Cursor URL()的容器元素添加了Title或Alt時，就會出現(xiàn)這種現(xiàn)象。最后很無奈的把Title標(biāo)簽去掉了。難道是因為在IE中Cursor會和Title、Alt沖突么？
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
------分隔線----------------------------
