CSS3新的鼠标样式介绍

最后更新于:2022-04-01 19:43:24

      在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/](http://www.sitepoint.com/css3-cursor-styles/) 作者:Craig Buckler于2011年1月5日 译者:蒋宇捷(转载请标明出处[http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe))
';