cursor用于在特定元素上更改鼠标光标。这在 Web 应用程序中特别有用，在这些应用程序中除了单击之外还可以完成不同的任务。这显然只在有指点设备时才有效：

.in-progress {
  cursor: progress;
}

可用光标

如果您使用的是台式机/笔记本电脑，请将鼠标悬停在以下内容上以查看可用的不同光标：

通用/默认光标

链接光标

滚动光标

状态光标

选择光标

拖放光标

缩放光标

抓取光标

调整光标大小

自定义光标

您可以定义自定义光标。请注意，并非所有浏览器都支持游标的 svg 文件，并且全面支持.cur文件，因此如果您想使用 svg 游标，最好提供.cur回退。您还可以提供对非自定义游标之一的回退。

您可以通过添加x和y坐标来定义光标热点的自定义位置，以指定热点应在提供的自定义图像中的位置。

请注意，当使用 svg 光标时，重要的是您的 svg在根 svg 元素上具有宽度和高度值，否则您的光标将不会显示。在下面的例子中，我们的 svg 文件（droplet.svg）像这样开始：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">...

.custom-cur {
  cursor: url('/images/droplet.svg');
}

/* With a .cur fallback */
.custom-cur {
  cursor: url('/images/droplet.svg'),
  url('/images/droplet.cur');
}

/* With a custom hotspot */
.custom-cur {
  cursor: url('/images/droplet.svg') 10 12;
}

/* With a non-custom fallback: */
.custom-cur {
  cursor: url('/images/droplet.svg'),
  move;
}

这是一个带有自定义光标的示例：

浏览器支持：根据Can I Use css3-cursors?，

截至 2020 年，全球只有80%的浏览器支持自定义光标。. 但这并不奇怪，许多不支持它的浏览器是仅用于移动的浏览器，不使用游标。

结论：

自定义光标是最常用的，以表明这是一个HTML元素不是已经链接<a href="...">的点击。但它提供了一组多样化的额外可配置性，这对于构建丰富的 Web 应用程序的开发人员可能很有用。使用自定义游标时请记住以下注意事项：

1. 您的用户大部分时间都花在其他站点上，因此请以与其他站点一致的方式使用自定义光标。
2. 触摸屏用户（手机和平板电脑）不会看到自定义光标。