CSS3鼠标样式介绍

发布时间:2020-08-30编辑:脚本学堂
本文介绍下css3鼠标样式的相关知识与实例,掌握下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)