HardBirch

CSS3新的鼠标样式介绍

时间:12-01-29 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:4 点击: 2,235 次

        在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新的鼠标样式介绍

CSS3新的鼠标样式介绍:目前有4 条留言

  1. 4楼
    Joinzheng:

    CSS3.0比2.0少了3个,不知道有影响不!

    2012-01-30 11:14 [回复]
  2. 地板
    xiaxiazhu119:

    MARK 学习

    2012-01-31 10:42 [回复]
  3. 板凳
    tony1978:

    以下样式在IE7也支持
    [code=css]
    cursor:vertical-text
    cursor:no-drop
    cursor:not-allowed
    cursor:col-resize
    cursor:row-resize
    cursor:all-scroll
    [/code]

    2012-02-01 14:07 [回复]
  4. 沙发
    tony1978:

    [reply]Joinzheng[/reply]
    不是少了,是在原来的18个基础上,又加了15个

    2012-02-01 14:08 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐