css cursor url用法格式詳解

來源:互聯網
上載者:User
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 屬性)

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.