CSS 游标

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 属性处理以逗号分隔的用户定义游标值列表,后跟*通用游标*。如果第一个游标指定不正确或无法找到,将使用逗号分隔列表中的下一个游标,依此类推,直到找到可用的游标。

如果浏览器没有任何用户定义的游标有效或支持,则将使用列表末尾的通用游标。

提示: 可以用于游标的标准格式是 .cur 格式。但是,你可以使用在线免费提供的 Image Converter 软件将影像 .jpg.gif 等转换成 .cur 格式。

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

在上面的示例中 custom.gifcustom.cur 是自定义光标文件,上传到你的服务器空间,并且 default 是在缺少自定义光标或查看器浏览器不支持时将使用的通用光标。

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

注意: IE9 及更早版本仅支持 .cur 静态游标和 .ani 动画游标类型的 URL 值。然而,浏览器如 Firefox,Chrome 和 Safari 浏览器支持 .cur.png.gif.jpg ,但不支持 .ani