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現在支援更大的圖示尺寸。

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