CSS 光标

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

改变光标的外观

浏览器通常会在网页的任何空白部分上显示鼠标指针，在任何链接或可点击的项目上显示戴手套的手，在任何文本或文本字段上显示编辑光标。使用 CSS，您可以重新定义这些属性以显示各种不同的光标。

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

下表演示了大多数浏览器将接受的不同光标。将鼠标指针放在输出列中的"TEST"链接上以显示该光标。

值	示例	输出
`default`	`a:hover{cursor:default;}`	TEST
`pointer`	`a:hover{cursor:pointer;}`	TEST
`text`	`a:hover{cursor:text;}`	TEST
`wait`	`a:hover{cursor:wait;}`	TEST
`help`	`a:hover{cursor:help;}`	TEST
`progress`	`a:hover{cursor:progress;}`	TEST
`crosshair`	`a:hover{cursor:crosshair;}`	TEST
`move`	`a:hover{cursor:move;}`	TEST
`url()`	`a:hover{cursor:url("custom.cur"), default;}`	TEST

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

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

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

提示： 可用于光标的标准格式是 .cur 格式。但是，您可以使用在线免费提供的图像转换器软件将 .jpg 和 .gif 等图像转换为 .cur 格式。

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

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

警告：如果要声明自定义光标，则必须在列表末尾定义一个通用光标，否则自定义光标将无法正确呈现。

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

注意： IE9 及更早的版本只支持静态光标 .cur 和动画光标 .ani 类型的 URL 值。但是，Firefox、Chrome 和 Safari 等浏览器支持 .cur, .png, .gif 和 .jpg，但不支持 .ani。