CSS3新的鼠标样式介绍

 在Web开发的早期，随着新技术的不断涌现，一切都让人兴奋。但是我们在过去十年里经历了一个技术的停滞期，直到由于HTML5的出现，Web开发再次让人着迷。特别是CSS3正在迅速发展，你会在其规范里发现许多有趣的宝物。

        在这篇文章里，我们要研究的是CSS鼠标样式属性，正如你所期望的的一样，它允许你改变在一个元素上移动鼠标时的指针样式。 它对于交互式Web App来说已经变得越来越重要。

CSS2的鼠标样式

        CSS2中提供相对较少的选择（悬停在不同的网页元素上，看看鼠标指针样式是如何变化的）：

[html]  view plain copy

1. cursor: auto  
2. cursor: inherit  
3. cursor: crosshair  
4. cursor: default  
5. cursor: help  
6. cursor: move  
7. cursor: pointer  
8. cursor: progress  
9. cursor: text  
10. cursor: wait  
11. cursor: e-resize  
12. cursor: ne-resize  
13. cursor: nw-resize  
14. cursor: n-resize  
15. cursor: se-resize  
16. cursor: sw-resize  
17. cursor: s-resize  
18. cursor: w-resize  

CSS3的鼠标样式

        在CSS3里我们有更多的样式可供选择。它们可以工作在IE9和火狐、Chrome、Safari、Opera的最新版本上（除非另有标注）：

[html]  view plain copy

1. cursor:none (not IE, Safari, Opera)  
2. cursor:context-menu (not Firefox, Chrome)  
3. cursor:cell (not Safari)  
4. cursor:vertical-text  
5. cursor:alias (not Safari)  
6. cursor:copy (not Safari)  
7. cursor:no-drop  
8. cursor:not-allowed  
9. cursor:ew-resize  
10. cursor:ns-resize  
11. cursor:nesw-resize  
12. cursor:nwse-resize  
13. cursor:col-resize  
14. cursor:row-resize  
15. cursor:all-scroll  

浏览器特定指针

        Mozilla和Chrome、Safari的某些版本中提供了一些私有样式，这很可能成为CSS3规范的一部分：

[html]  view plain copy

1. cursor:-webkit-grab; cursor: -moz-grab;  
2. cursor:-webkit-grabbing; cursor: -moz-grabbing;  
3. cursor:-webkit-zoom-in; cursor: -moz-zoom-in;  
4. cursor:-webkit-zoom-out; cursor: -moz-zoom-out;  

创建你自己的指针

        最后，你可以创建自己的指针图形，例如：

[html]  view plain copy

1. cursor:url(images/cursor.cur);  
2. 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日