CSS自訂滑鼠指標樣式，css自訂滑鼠指標

CSS自訂滑鼠指標樣式，css自訂滑鼠指標
原文連結: http://davidwalsh.name/css-custom-cursor
Demo地址: http://davidwalsh.name/demo/css-custom-cursor.php
原文日期: 2014-09-16
翻譯日期: 2014-09-17
翻譯人員: 鐵錨

還記得Web 1.0時代的那些苦逼歲月嗎? 你想盡一切辦法來最佳化你的網站. 還要飽受IE6慘無人道的虐待,舉個栗子, IE中那些害死人不償命的捲軸, 我一直記得第三方類庫 CometCursor. CometCursor非常強悍,主要用來建立和載入自訂滑鼠游標樣式。現在可能你會覺得當初的那些實現手段特別老土,但有時又確實需要定製一下游標圖案,那麼一起來看看CSS怎麼實現吧, It's So Easy, 哪裡不會點哪裡!

CSS代碼

CSS中的 cursor 屬性可以用逗號分隔指定一系列的游標項,可以用 url() 來自訂游標的圖案:

body {cursor: url('some-cursor.ico'), default;}

在實際應用中, 最好在後面加上後備的原生游標,如 default, 這和設定字型( font-family)樣式是一樣的道理。
有一點需要注意,Firefox會將游標裁剪到一個較小的比例, 而Chrome現在支援更大的表徵圖尺寸。

不要猶豫了,在重要的地方加上自訂指標表徵圖吧. 就如在看相簿預覽時的放大(+)和縮小(-)按鈕,你肯定想做得與眾不同.


怎用CSS自訂滑鼠指標

眾所周知，在windows中可以修改滑鼠指標顯示效果，這些指標都存放在windows的cursors目錄中，它們是以.cur和.ani結尾的圖片檔案。其實，網頁中也可以引用這種表徵圖。有時候，開啟某些網頁，滑鼠指標就會變成一些奇怪的小表徵圖，這就是利用CSS自訂滑鼠指標的成果。
 
JS動態該表滑鼠樣式，滑鼠放在圖片上，滑鼠指標變成放大鏡形狀

可以使用css來控制
.class { cursor:url('路徑'),auto;}cursor是支援自訂表徵圖的
你只要定義該元素的樣式，給定路徑後，就可以載入。
不過要注意的是，考慮到IE的相容性問題，最好使用ico或cur格式的檔案，解析度最好是32×32