如何使用 CSS 设置不同类型的光标？

CSS 光标（Cursor）属性可以让我们设置鼠标指针的样式，光标属性常用来更改默认的鼠标样式，便于区分不同的交互方式。

基本语法

selector {
    cursor: value;
}

其中，selector 表示选中的元素，cursor 表示光标属性，value 表示光标类型。

光标类型

下面介绍一些常用的光标类型及其对应的值。

普通光标

光标属性默认的值是 auto，即由浏览器自动决定光标类型。如果希望设置默认的光标类型，可以使用 default 值。

button {
    cursor: default;
}

文本光标

文本光标通常用于输入文字的区域，比如输入框、文本框等。

textarea {
    cursor: text;
}

链接光标

链接光标用于指示链接可以被点击，常用于超链接、邮件链接等。

a {
    cursor: pointer;
}

移动光标

移动光标用于指示元素可以被拖动，常用于拖拽场景。

.drag {
    cursor: move;
}

缩放光标

缩放光标用于指示该元素可以被缩放，常用于调整元素大小的场景。

.resizable {
    cursor: nwse-resize;
}

禁用光标

禁用光标通常用于禁止使用的元素，比如禁用按钮、禁用输入框等。

.disabled {
    cursor: not-allowed;
}

自定义光标

如果想要使用自定义的光标类型，可以使用 url() 函数指定光标图像。

.custom {
    cursor: url('../images/my-cursor.png'), auto;
}

结语

本文介绍了常用的光标类型及其对应的 CSS 值，如果想要了解更多，请查看 CSS 光标属性文档。