css光标cursor属性和样式 – CSS高级教程-srcmini

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;}`

也可以使用完全定制的光标。

光标属性处理一个逗号分隔的用户定义光标值列表，后跟通用光标。如果指定的第一个光标不正确或无法找到，则将使用逗号分隔的列表中的下一个光标，以此类推，直到找到可用的光标为止。

如果用户定义的光标没有一个是有效的，或者浏览器不支持，那么将使用列表末尾的通用光标。

提示：可用于光标的标准格式是.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。