? ? ? ? 在Web開發的早期，隨著新技術的不斷涌現，一切都讓人興奮。但是我們在過去十年里經歷了一個技術的停滯期，直到由于HTML5的出現，Web開發再次讓人著迷。特別是CSS3正在迅速發展，你會在其規范里發現許多有趣的寶物。

? ? ? ??在這篇文章里，我們要研究的是CSS鼠標樣式屬性，正如你所期望的的一樣，它允許你改變在一個元素上移動鼠標時的指針樣式。?它對于交互式Web App來說已經變得越來越重要。

CSS2的鼠標樣式

? ? ? ??CSS2中提供相對較少的選擇（懸停在不同的網頁元素上，看看鼠標指針樣式是如何變化的）：

cursor: auto cursor: inherit cursor: crosshair cursor: default cursor: help cursor: move cursor: pointer cursor: progress cursor: text cursor: wait cursor: e-resize cursor: ne-resize cursor: nw-resize cursor: n-resize cursor: se-resize cursor: sw-resize cursor: s-resize cursor: w-resize

CSS3的鼠標樣式

? ? ? ??在CSS3里我們有更多的樣式可供選擇。它們可以工作在IE9和火狐、Chrome、Safari、Opera的最新版本上（除非另有標注）：

cursor:none (not IE, Safari, Opera) cursor:context-menu (not Firefox, Chrome) cursor:cell (not Safari) cursor:vertical-text cursor:alias (not Safari) cursor:copy (not Safari) cursor:no-drop cursor:not-allowed cursor:ew-resize cursor:ns-resize cursor:nesw-resize cursor:nwse-resize cursor:col-resize cursor:row-resize cursor:all-scroll

瀏覽器特定指針

? ? ? ??Mozilla和Chrome、Safari的某些版本中提供了一些私有樣式，這很可能成為CSS3規范的一部分：

cursor:-webkit-grab; cursor: -moz-grab; cursor:-webkit-grabbing; cursor: -moz-grabbing; cursor:-webkit-zoom-in; cursor: -moz-zoom-in; cursor:-webkit-zoom-out; cursor: -moz-zoom-out;

創建你自己的指針

? ? ? ??最后，你可以創建自己的指針圖形，例如：

cursor:url(images/cursor.cur); cursor:url(images/cursor.png) x y, auto;

? ? ? ??注意：

? ? ? ??1.??? Internet Explorer需要一個Windows指針文件（.cur）。

? ? ? ??2.??? 火狐、Chrome和Safari需要一幅圖像 - 我推薦使用一張24位Alpha透明的PNG圖片。

? ? ? ??3.??? Firefox還需要一個非URL指針設置作為備用值。

? ? ? ??4.??? Opera不支持這種寫法。

? ? ? ??5.??? x和y是Firefox、Chrome和Safari中的可選屬性，它定義了圖像從左上角開始的精確指針位置。如果省略，都默認為0。

? ? ? ??挺好，但它看起來會花費我太多精力！所以我會一直堅持使用標準的指針樣式...

譯自：http://www.sitepoint.com/css3-cursor-styles/

作者：Craig Buckler于2011年1月5日

譯者：蔣宇捷（轉載請標明出處http://blog.csdn.net/hfahe）

總結

以上是生活随笔為你收集整理的CSS3新的鼠标样式介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。