cursor

  • 版本:CSS2
  • 继承性:有
cursor属性在CSS用户界面中是比较常用的,本文将带你深入理解cursor属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上cursor的演示案例,希望能够对你有所帮助。

cursor的具体语法

cursor:[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

默认值auto

适用于:所有元素

继承性:有

cursor的使用说明

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
  • 使用自定义图像作为光标类型,IE, Opera只支持*.cur等特定的图片格式;Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
  • cursor的属性值可以是一个序列

    示例代码:

    :link,:visited{
        cursor:url(example.svg#linkcursor),
                url(hyper.cur),
                url(hyper.png) 2 3,
                pointer;
    }

    本例用来给所有的超链接定义光标类型,客户端如果不支持SVG类型的光标,则使用下个"hyper.cur";如果cur类型也不支持,则使用下个"hyper.png";依次类推。

  • 对应的脚本特性为cursor

cursor的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6 4 5.1.7 13 11.5

cursor的完整演示案例

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册