css光标cursor属性和样式 – CSS高级教程 csscursor|CSS

上一章CSS高级教程请查看：css轮廓outline属性和样式
CSS光标属性，用于定义鼠标移动到某个区域或网页上的某个链接时的光标类型(即鼠标指针)。
改变光标的外观浏览器通常将鼠标指针显示在web页面的任何空白部分上，将戴手套的手显示在任何链接或可单击的项目上，将编辑光标显示在任何文本或文本字段上。使用CSS，你可以重新定义这些属性来显示各种不同的光标。

h1 { cursor: move; } p { cursor: text; }

下表演示了大多数浏览器将接受的不同光标，将鼠标指针放在输出列中的“TEST”链接上，以显示光标（外观可能预览不了，可以自行逐一尝试）。

外观	值	例子
	`default`	`a:hover{cursor:default; }`
	`pointer`	`a:hover{cursor:pointer; }`
	`text`	`a:hover{cursor:text; }`
	`wait`	`a:hover{cursor:wait; }`
	`help`	`a:hover{cursor:help; }`
	`progress`	`a:hover{cursor:progress; }`
	`crosshair`	`a:hover{cursor:crosshair; }`
	`move`	`a:hover{cursor:move; }`
	`url()`	`a:hover{cursor:url("custom.cur"), default; }`

创建自定义光标也可以使用完全定制的光标。
光标属性处理一个逗号分隔的用户定义光标值列表，后跟通用光标。如果指定的第一个光标不正确或无法找到，则将使用逗号分隔的列表中的下一个光标，以此类推，直到找到可用的光标为止。
如果用户定义的光标没有一个是有效的，或者浏览器不支持，那么将使用列表末尾的通用光标。
【css光标cursor属性和样式 – CSS高级教程】提示：可用于光标的标准格式是.cur格式。但是，你可以使用在线免费提供的图像转换器软件将.jpg和.gif等图像转换成.cur格式。

a { cursor: url("custom.gif"), url("custom.cur"), default; }

在上面的例子中，custom.gif和custom.cur是自定义光标文件，上传到服务器空间，默认情况下是通用光标，如果自定义光标丢失或查看器的浏览器不支持自定义光标，将使用该光标。
警告：如果你正在声明一个自定义光标，你必须在列表的末尾定义一个通用光标，否则自定义光标将无法正确呈现。
注意：IE9和更早的版本只支持.cur类型的URL值(用于静态光标)和.ani类型的URL值(用于动画光标)。然而，Firefox、Chrome和Safari等浏览器支持.cur、.png、.gif和.jpg，但不支持.ani。