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

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

CSS2的鼠标样式

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

 
  1. cursorauto
  2. cursor: inherit
  3. cursorcrosshair
  4. cursordefault
  5. cursorhelp
  6. cursormove
  7. cursorpointer
  8. cursor: progress
  9. cursor: text
  10. cursorwait
  11. cursore-resize
  12. cursorne-resize
  13. cursornw-resize
  14. cursorn-resize
  15. cursorse-resize
  16. cursorsw-resize
  17. cursors-resize
  18. cursorw-resize

CSS3的鼠标样式

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

 
  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规范的一部分:

 
  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;

创建自己的指针

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

 
  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。