CSS 游标

游标（Cursor）也叫光标，是鼠标的一个图形化表示。CSS 允许我们自定义鼠标指针的样式，这给我们的网页增加了更多的交互效果。

使用方法

selector {
  cursor: value;
}

其中，selector 表示要添加游标样式的元素，value 表示指针的样式。常见的指针样式有以下几种：

• auto：自动选择合适的游标样式；
• default：默认的游标样式，通常是一个箭头；
• pointer：手型游标，表示当前元素可以被点击；
• move：移动游标，表示当前元素可以被拖动；
• text：文本游标，表示当前元素可以输入文本。

自定义游标

除了常见的游标样式外，CSS 允许我们自定义鼠标指针的样式。我们可以使用 url() 函数来引入自定义游标图片。

/* 引入图片 */
selector {
  cursor: url('custom-cursor.png'), auto;
}

这里 url() 函数中指定的图片路径可以是相对路径或绝对路径。

游标优先级

如果对同一个元素同时应用多个游标样式，则最后一个样式的优先级最高。

/* 最后一个样式优先级最高 */
selector {
  cursor: pointer;
  cursor: move;
}

注意事项

• 自定义游标图片应该小于 128x128 像素，并且保存为 PNG 格式；
• 不要为所有元素添加自定义游标，否则可能会影响页面性能；
• 不要使用与目标元素不符合风格的自定义游标。