css中定义鼠标指针样式的属性cursor

在CSS中，cursor 属性用于定义鼠标指针在元素上移动时的样式。它允许你改变默认的鼠标指针样式，以提供关于用户可以进行哪些操作的视觉反馈。

以下是cursor属性的一些常见值和用法：

1. 默认值：auto

   • 这是大多数元素的默认设置。浏览器会根据上下文自动选择适当的鼠标指针样式。

2. 文本选择：text

   • 当鼠标指针悬停在文本上时，显示用于文本选择的指针样式（通常是带有箭头的I形）。

3. 等待/加载：wait 或 progress

   • 显示一个表示程序正忙或正在加载的指针样式（通常是一个旋转的沙漏或圆圈）。

4. 可点击/链接：pointer

   • 显示一个用于链接的手形指针样式（在许多系统上是一个手指或箭头）。

5. 移动：move

   • 显示一个表示可以移动元素的指针样式（通常是一个带有四个箭头的十字）。

6. 无：none

   • 不显示鼠标指针。这在某些特定的交互或动画中可能很有用，但请小心使用，因为它可能会使用户感到困惑。

7. 不允许：not-allowed

   • 显示一个表示某些操作不被允许的指针样式（通常是一个带有斜线的圆圈）。

8. 自定义：url()

   • 允许你指定一个自定义的鼠标指针图像。图像应为光标文件（.cur）或任何图像格式（如.png、.gif等），但请注意，不是所有浏览器都支持所有图像格式作为光标。

使用示例：

/* 使用默认样式 */
.auto-cursor {
  cursor: auto;
}

/* 使用手形样式，通常用于链接 */
.pointer-cursor {
  cursor: pointer;
}

/* 使用自定义图像作为光标 */
.custom-cursor {
  cursor: url('my-cursor.png'), auto; /* 如果自定义图像不可用，则回退到auto */
}

/* 禁止某些操作 */
.not-allowed-cursor {
  cursor: not-allowed;
}

注意：在使用自定义光标时，请确保图像足够小且清晰，以便在各种分辨率和设备上都能良好地显示。此外，由于浏览器缓存和其他因素，自定义光标可能不会立即显示。在某些情况下，你可能需要清除浏览器缓存或强制刷新页面以查看更改。

最后查看不同样式鼠标指针案例：https://jsrun.net/YWDKp/edit