CSS Cursors(光标)

CSS光标属性，用于在鼠标移至某个区域或网页上的链接时定义光标类型（即鼠标指针）。

改变光标的外观

浏览器通常将鼠标指针显示在网页的任何空白部分上，带手套的手显示在任何链接或可单击的项目上，将编辑光标显示在任何文本或文本字段上。使用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;}	测试

查看更多光标»

创建自定义光标

也可以具有完全自定义的光标。

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

如果没有用户定义的光标有效或不受浏览器支持，则将使用列表末尾的通用光标。

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

在上面的示例中custom.gif，custom.cur是自定义光标文件，已上传到您的服务器空间，并且default是通用光标，如果自定义光标丢失或查看器的浏览器不支持它，则将使用该通用光标。

这是自定义光标的现场演示。