使用 CSS 更改光标以获得更好的用户体验

cursor CSS 属性用于设置鼠标指针悬停在元素上时要显示的鼠标光标类型（如果有）。

有些情况下，用户代理样式表中默认的光标行为并不适用。在这种情况下，我们应该将光标更改为能够反映用户在该元素上预期交互方式的行为。

快去Codepen看看所有的光标吧🧡

使用自定义光标 ↓

cursor 属性可以指定为零个或多个<url>值，值之间用逗号分隔。cursor 属性支持 SVG 文件，但不支持 GIF 文件。

是的，您可以使用 png、jpg 等任何图像创建自己的自定义光标。

<div class="cursors">
  <button class="heart">Heart</button>
  <button class="earth">Earth</button>
  <button class="smile">Smile</button>
</div>

.cursors {
  display: flex;
  flex-wrap: wrap;
}
.heart {
  cursor: url("https://i.imgur.com/K10EMnr.png"), auto;
}
.earth {
  cursor: url("https://i.imgur.com/scE50J2.png"), pointer;
}
.smile {
  cursor: url("https://i.imgur.com/aPPijZC.png"), pointer;
}