技术文章

联系我们

联系人：李开瑞
手机：18981200088
电话：0839-5820000
传真：0839-5820008
邮件：895820000@qq.com
邮政编码：628400
网址：http://www.ruikang.net
地址：四川省苍溪县文化巷61号

前端设计

Css之cursor

来源： 瑞康科技 日期：2016-11-28 15:17:26 点击：2247 属于：前端设计

语法：

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

<url>：: 使用绝对或者相对地址引入外部图像作为光标形状
<url> <x> <y>：: 通过<x> <y>两个值指定具体需要显示的图像位置。类似 <' background-position '>
auto：: 用户代理基于当前上下文决定光标形状
default：: 相关平台的默认光标形状，通常为箭头。
none：: 没有光标形状

其他待完成...

说明：

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.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。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-11.0^#1	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
none	6.0-8.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
none	9.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
alias \| cell \| copy \| ew-resize \| ns-resize \| nesw-resize \| nwse-resize \| context-menu	6.0-9.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
	10.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
zoom-in \| zoom-out	6.0-11.0	2.0-23.0^-moz-	4.0-36.0^-webkit-	6.0-8.0^-webkit-	15.0-23.0^-webkit-	6.0-8.3	2.1-4.4.4	18.0-42.0
zoom-in \| zoom-out	6.0-11.0	24.0+	37.0+	6.0-8.0^-webkit-	24.0+	6.0-8.3	2.1-4.4.4	18.0-42.0
grab \| grabbing	6.0-11.0	2.0-27.0^-moz-	4.0-22.0^-webkit-	6.0-8.0^-webkit-	15.0+	6.0-8.3	2.1-4.4.4	18.0-42.0
grab \| grabbing	6.0-11.0	28.0+	23.0+	6.0-8.0^-webkit-	15.0+	6.0-8.3	2.1-4.4.4	18.0-42.0