CSS 游标

CSS 游标属性,用于在鼠标移动到某个区域或通过网页上的链接时定义游标类型(即鼠标指针)。

改变光标的外观

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

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

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

创建自定义光标

它也可以有完全定制的游标。

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