CSS cursor 属性介绍

CSS cursor 属性介绍

在CSS中，cursor属性用于设置鼠标指针移动到特定元素上时显示的样式。通过使用不同的cursor值，我们可以改变鼠标指针的外观，以增强用户体验。

基本语法

cursor属性的基本语法如下：

selector {
    cursor: value;
}

其中，selector表示要应用样式的元素选择器，value表示cursor的取值。下面将逐一介绍不同的取值及其效果。

可用取值

auto

默认值。浏览器设置的默认光标，通常是一个箭头。

div {
    cursor: auto;
}

pointer

指示可单击的链接或按钮。通常是一个手形图标。

a {
    cursor: pointer;
}

crosshair

十字线光标，用于绘制图形。

canvas {
    cursor: crosshair;
}

move

指示可移动的元素。

.draggable {
    cursor: move;
}

text

指示文本可选中。

p {
    cursor: text;
}

not-allowed

指示不允许进行某种操作，如禁用按钮。

.disabled {
    cursor: not-allowed;
}

help

指示帮助信息。

question {
    cursor: help;
}

progress

指示程序执行状况，如一个进度条。

loading {
    cursor: progress;
}

zoom-in

指示可以缩放。

img {
    cursor: zoom-in;
}

zoom-out

指示可以缩小。

img {
    cursor: zoom-out;
}

高级属性

url()

通过url()函数可以自定义鼠标指针图标。

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

grab

指示可抓取元素，表示元素可以被拖拽。

.draggable {
    cursor: grab;
}

grabbing

指示正在抓取元素的状态。

.dragging {
    cursor: grabbing;
}

其他注意事项

• PC端和移动端设备对cursor属性支持有差异，一些值可能在移动端无效。
• 使用自定义鼠标样式时，务必保证光标图标的可用性和用户体验。

在设计网页时，cursor属性是非常实用的，可以根据元素不同的功能和状态设置不同的鼠标样式，提升用户体验。