CSS 可以控制鼠标指针的外观。我们有很多可用的选项，而且 我们已经在这里的 CSS-Tricks 年鉴中全面介绍了它们。
尽管如此，我们很容易忽视鼠标指针及其对网站用户体验的影响。还记得我们学习到 ::selection 存在的时候吗？当时每个网站都开始使用它来个性化文本选择时的背景颜色。自定义鼠标指针同样简单，并且在正确使用时可以增添一丝 understated flourish。
在这篇文章中，我将介绍我认为在 CSS 中控制鼠标指针可以改善用户体验的两种方法。
在元素上使用正确的鼠标指针
一些鼠标指针更改内置在用户代理样式表中。以 <a> 链接为例。即使我们在 CSS 中不进行其他操作，链接也会具有 color: blue; 和 text-decoration: underline;。这是一个明确的视觉指示，表示超链接文本是可点击的。
浏览器会更进一步。将鼠标悬停在链接上时，鼠标指针会从默认的黑色箭头更改为伸出食指的手，也称为指针。
有时用户代理样式表中的默认鼠标指针行为并不够用。在这些情况下，我们应该将鼠标指针更改为反映该元素上预期用户交互的内容。
以 jQueryUI draggable() 函数为例。我们可以将其应用于元素，它将允许用户点击并拖动该元素到视窗周围，但如果鼠标指针保持默认状态，用户将永远不会知道这一点。在元素中添加 cursor: move; 可以帮助解决这个问题。
查看 CodePen 上 Geoff Graham ( @geoffgraham ) 的 QNqMRp 创作。
对于任何数量的情况都是如此，无论我们讨论的是表单输入、图像还是任何其他你能想到的东西。当默认箭头不足以提示时，始终抓住机会将元素的鼠标指针与其行为相匹配。以下是当前可用所有鼠标指针的演示。
查看 CodePen 上 Chris Coyier ( @chriscoyier ) 的 鼠标指针！ 创作。
使用自定义鼠标指针来增强元素
您可能会问，什么是自定义鼠标指针？也就是说，使用您自己创建的图像来代替鼠标指针。当然可以！
我们可以像这样将 cursor 属性指向图像。
.module {
cursor: url('path-to-image.png'), auto;
}我发现当添加个性化的元素时，这很有用，但用户可能不会想到它。例如，一个表单，其中问题的答案对应于特定情绪。
查看 CodePen 上 Geoff Graham ( @geoffgraham ) 的 qZjwGe 创作。
我发现使用表情符号本身就是一个技巧。您可以从 这样的网站 上复制粘贴表情符号，然后将其粘贴到文本编辑器中并将其保存为 PDF，然后可以在 Illustrator 中打开它。从那里，我就可以选择图像，将其粘贴到 Photoshop 中，并创建一个具有透明背景的 PNG 图像。就这么简单！
对于那些对 SVG 感兴趣的人，我很高兴地说它是可行的！cursor 属性确实接受所有 SVG 文件。但遗憾的是，不接受动画 GIF。
查看 CodePen 上 Geoff Graham ( @geoffgraham ) 的 QNgoQW 创作。
所以，遗憾的是没有动画鼠标指针，除非您做一些疯狂的事情，例如隐藏鼠标指针 (cursor: none;)，使用 JavaScript 跟踪鼠标位置，并显示完全自定义的内容。
例如，像这样！
查看 CodePen 上 tamm ( @tamm ) 的 鼠标指针跟随动画 创作。
来自网络的其他示例
您可能认为找到自定义鼠标指针的好例子并不容易。也许它不像其他 CSS 功能那样被广泛使用，或者是我们仍在尝试理解的某些东西，但以下是一些将其用得好的网站。
我同意这篇文章关于为元素使用正确鼠标指针的观点，但是我非常不喜欢使用自定义鼠标指针，除非鼠标指针背后的交互是显而易见的。表情符号示例虽然只是一个示例，但对于用户应该进行的交互并不明确。不应该丧失可访问性，因此在选择实现此功能时，应该谨慎行事。
是的，我同意，还有另外一点，就是不能保证网站其他部分的图片/主题不会与选择的鼠标指针颜色冲突。您是否曾经有过“我的鼠标指针去哪儿了？”的感觉？……
我完全同意 Melanie 的观点，用不熟悉的东西替换鼠标指针会让用户感到困惑，即使目的是为了“有趣”或“古怪”。如果作者真的非常想这样做，他们至少应该将预期鼠标指针的图像与他们的自定义图像一起包含在内。在上面的表情符号示例中，如果显示了默认的
cursor: pointer图标，并添加了笑脸作为增强而不是替换，那么用户会更清楚地了解调用操作是“点击”。也就是说，您仍然会遇到问题，因为默认鼠标指针图标在不同平台上可能在视觉上有所不同。这是一个很滑的坡道！
如果您喜欢摇滚乐，请查看这个网站上的鼠标指针：D http://radiokdug.com/
哈哈！太棒了——感谢分享。:)
我仅仅因为这个链接就爱死你了！：D
哈哈，合法的实现。
用手拖动鼠标指针仍然是供应商前缀，这真是太可惜了。我认为它应该真正进入 CSS 规范中。
您是指
cursor: grab | grabbing吗？事实上，它们已经在规范中了（即使不是处于风险中的功能），并且 Firefox 可以在没有前缀的情况下支持它们（根据 MDN，从版本 27 开始）。哦，不错。似乎错过了一个。感谢提醒！:)
您还必须考虑到，由于手持设备如今构成了大多数网站访问者的比例，因此鼠标指针的重要性不如以前那么高了。
我不知道是否不重要，但只是另一个需要考虑的上下文。:)
我不确定 SVG 光标支持是否那么深入。IMO，除了 PNG 之外的任何东西都不是那么安全的赌注。
是的，看看所有浏览器和 SVG 在某些 CSS 功能或一些特殊的堆叠效果或过滤器中无法正常工作的东西，这让我感到非常难过。我喜欢 SVG，每次我在项目中包含它，都要创建很多解决方法，这太复杂了，有时候我感觉自己要回到光栅了。
不要这样做。只有在绝对必要时才应更改光标。更改光标在跨浏览器中是不可预测的，并且会导致可用性问题和用户沮丧。我同意在进行拖放操作时将光标更改为“移动”是一个好主意，或者在该元素可点击时更改为“指针”。
当您将触摸屏考虑在您的设计中时，您可能需要找到其他方式来表达交互模型，而不是依赖悬停。在这种情况下，您仍然可以更改光标以优化桌面用户，但为什么要费心添加此冗余设计元素？
因为*如果*存在光标，让它发出错误类型的交互信号真的很令人困惑，即使没有光标的元素足够清晰。看看输入字段（搜索框、姓名、电子邮件、回复）——它们的目的非常明确。但试试当光标不改变，或者改变成错误的东西（比如等待图标）时会发生什么。链接也是如此，它们很明显是链接，因为它们是彩色的文本，也许还有下划线，或者按钮，它们非常明显是按钮——在触摸屏上，这些都不会有问题，但如果我们有一个光标，我们期望它传达某些信息，因此它应该确切地做到这一点。
我相当了解光标类型
我如何在光标中使用字体图标？
超级方便。我正在寻找这个。谢谢。
如果您喜欢摇滚乐，请查看这个网站上的鼠标指针：D http://radiokdug.com/
这就是我说的……
这完全可以帮助传达诸如时间线图表之类的某些内容上的“隐藏”操作，单击一个点会做一些事情……假设它扩展了某些东西，并且光标旁边有一个小的扩展图像/图标。
接下来在 CSS-Tricks 上：使用 SVG 和带有 < audio > 标签的 MIDI 背景制作酷炫的动画燃烧头骨。
说真的，重新指定库存 UA 光标有很多很好的用途。我还没有见过一个图像文件光标重新指定不是一个糟糕的选择。
用户体验有助于降低跳出率，并可以提高转化率，因此拥有一个引人入胜的网站非常重要。Sitefinity CMS、WordPress 等企业级 Web 内容管理服务是潜在的强大平台，使开发人员能够交付有吸引力的数字体验。CSS 可以实现有吸引力的任务，但是过度使用 CSS 会使页面变重。确保在页面加载时间和用户体验之间保持平衡。如果网站上有很多 CSS，使用缓存工具可能会有所帮助。
很棒的文章，谢谢 Geoff。
第四个 Codepen（自定义光标方法：SVG、PNG 等）的内容在我使用的不同浏览器中呈现不一致。我在文章中没有看到关于浏览器兼容性的内容，因此假设它们应该是健壮的？
我没有时间在代码中仔细研究，但这是我在 Windows 8.1 Pro 下的体验
Chrome 49 – 工作：SVG、Base64 PNG、PNG。损坏：Base 64 SVG、GIF
Firefox 45 – 工作：Base64 PNG、PNG。损坏：SVG、Base 64 SVG、GIF
IE11 – 工作：无。损坏：所有。
您好，我有一个与发布的内容不同的问题，在这个网站上，背景是不同类型的背景，我该如何制作看起来像瓷砖的背景，就像这个网站上的背景之一？
抱歉，打字错误，“这个网站有不同类型的背景……”，我该如何制作看起来像瓷砖的背景？