光标用于更改鼠标光标在特定元素上的位置。这在Web应用程序中尤其有用，在Web应用程序中，除了点击之外，还可以完成不同的任务。这显然只有在有定点设备的情况下才有效：

1.in-progress {
2  cursor: progress;
3}

可用游标

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

常规/默认游标

链接光标

滚动光标

状态游标

选择游标

拖放光标(&A)

缩放游标

抓住光标

调整游标大小

自定义游标

您可以定义自定义游标。请注意，并非所有浏览器都支持将SVG文件用于游标，而.cur文件则全面受支持，因此如果您希望使用SVG游标，提供.cur后备选项可能是个好主意。您还可以提供对其中一个非自定义游标的后备。

您可以通过添加X&Y坐标来定义光标热点的自定义位置，以确定热点在提供的自定义图像中的位置。

请注意，在使用SVG游标时，重要的是您的SVG在根SVG元素上具有宽度和高度值，否则您的光标将不会显示。在下面的示例中，我们的SVG文件(dropet.svg)的开头如下所示：

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

 1.custom-cur {
 2  cursor: url('/images/droplet.svg');
 3}
 4
 5/* With a .cur fallback */
 6.custom-cur {
 7  cursor: url('/images/droplet.svg'),
 8  url('/images/droplet.cur');
 9}
10
11/* With a custom hotspot */
12.custom-cur {
13  cursor: url('/images/droplet.svg') 10 12;
14}
15
16/* With a non-custom fallback: */
17.custom-cur {
18  cursor: url('/images/droplet.svg'),
19  move;
20}

下面是一个使用自定义光标的示例：

<$>[信息] 浏览器支持： 根据Can I Use css3-cursors？.]，截至2020年，全球只有80% 的浏览器支持自定义游标但这并不令人惊讶，许多不支持它的浏览器都是仅限移动设备的浏览器，不使用游标。<$>

结论：

自定义游标最常用于指示不是 已经是链接<a href=...>的HTML元素是可点击的。但它提供了一组不同的附加可配置性，这对开发丰富的Web应用程序的开发人员可能很有用。使用自定义游标时，请牢记以下注意事项：

1.您的用户将大部分时间花在_Other_Sites上，因此应以与_Other_Sites一致的方式使用自定义游标。 2.触摸屏用户(移动和平板电脑)不会看到自定义光标。