【CSS】cursor: auto, default, none 有什么区别？
这三个 cursor 值虽然都与鼠标指针有关，但它们的功能和应用场景有显著的区别：
1. cursor: auto;
- 含义： 这是
cursor属性的初始值（或默认行为），意味着浏览器会根据鼠标当前所在的元素类型和上下文，智能地选择最合适的鼠标指针样式。 - 行为：
- 在普通的文本上，通常显示为文本选择光标（
text，即I形光标）。 - 在链接（
<a>标签）上，通常显示为手形指针（pointer）。 - 在可调整大小的元素边缘，会显示为双向箭头（如
nw-resize,e-resize等）。 - 在输入框或可编辑区域，显示为文本选择光标。
- 在一般非交互区域，显示为默认箭头（
default）。
- 在普通的文本上，通常显示为文本选择光标（
- 何时使用： 在大多数情况下，你无需显式设置
cursor: auto;，因为这是元素的默认行为。它让浏览器根据其内置的UI/UX规则来处理鼠标指针，提供了最符合用户直觉的体验。
2. cursor: default;
- 含义： 强制显示标准的默认箭头鼠标指针。
- 行为： 无论鼠标悬停在什么元素上（链接、文本输入框、可调整大小的区域等），它都会始终显示为普通的箭头指针，覆盖了浏览器原本会根据上下文改变指针的默认行为。
- 何时使用：
- 当你希望某个区域即使包含交互元素（如链接），也不显示其特有的指针样式，而是统一显示为箭头时。例如，你可能有一个自定义的导航菜单项，它的行为类似链接，但你希望鼠标指针保持箭头形状，而不是手形。
- 用于重置子元素的指针样式。如果父元素设置了某种特殊的
cursor，而你想让子元素恢复到普通的箭头，可以使用cursor: default;。
3. cursor: none;
- 含义： 使鼠标指针完全不可见。
- 行为： 当鼠标悬停在设置了
cursor: none;的元素上时，鼠标指针会消失。 - 何时使用：
- 自定义鼠标指针： 当你使用
url()属性提供一个自定义的图片作为鼠标指针时，有时会配合cursor: none;来隐藏原生鼠标指针，只显示自定义图片（尽管通常url()已经足够）。 - 全屏应用或游戏： 在某些全屏模式的应用或游戏中，开发者可能希望隐藏系统默认的鼠标指针，以提供更沉浸或自定义的体验。
- 特殊UI效果： 在一些需要暂时隐藏鼠标指针的特殊用户界面设计中。
- 自定义鼠标指针： 当你使用
- 注意事项： 谨慎使用
cursor: none;，因为它会降低用户的可发现性和交互反馈。用户可能不知道当前鼠标的位置，这会影响可用性，尤其是在桌面端。
总结比较
| 特性 | cursor: auto; | cursor: default; | cursor: none; |
|---|---|---|---|
| 功能 | 浏览器根据上下文智能选择指针 | 强制显示标准的默认箭头指针 | 隐藏鼠标指针 |
| 行为 | 动态变化（链接变手形，文本变I形等） | 始终为箭头，覆盖上下文行为 | 鼠标指针消失不见 |
| 场景 | 大多数网页元素的默认和推荐行为，提供最佳用户体验 | 需要统一显示箭头，或重置特定元素的指针样式时 | 自定义指针，全屏应用，特殊UI效果（谨慎使用） |
| 视觉 | 变化多端，与元素交互类型匹配 | 始终是系统默认的箭头图标 | 看不到鼠标指针 |
| 优先级 | 低于明确指定的 cursor 值，但高于其自身的默认浏览器行为 | 高于 auto 提供的上下文行为，但低于其他明确指定的 cursor | 强制隐藏，优先级最高（在可见性方面） |
通过实际例子来感受差异会更直观：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cursor Differences</title><style>body {font-family: sans-serif;margin: 20px;display: flex;flex-direction: column;gap: 20px;}div {width: 300px;height: 100px;border: 2px solid #ccc;padding: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 1.1em;background-color: #f9f9f9;}.auto-cursor {cursor: auto; /* 显式设置，但通常是默认行为 */border-color: blue;}.default-cursor {cursor: default;border-color: green;}.none-cursor {cursor: none;border-color: red;}a {color: blue;text-decoration: underline;margin-top: 5px;}p {margin: 0;padding: 0;user-select: none; /* 防止文本被选中分散注意力 */}input {margin-top: 5px;}</style>
</head>
<body><div class="auto-cursor"><p>鼠标移到这里（<code>cursor: auto;</code>）</p><a href="#">这是一个链接</a><input type="text" placeholder="输入文本"></div><div class="default-cursor"><p>鼠标移到这里（<code>cursor: default;</code>）</p><a href="#">这是一个链接</a><input type="text" placeholder="输入文本"></div><div class="none-cursor"><p>鼠标移到这里（<code>cursor: none;</code>）</p><a href="#">这是一个链接</a><input type="text" placeholder="输入文本"></div><p style="margin-top: 30px;">**注意：**<ul><li>在 `auto` 区域，鼠标会根据链接和输入框自动变化。</li><li>在 `default` 区域，鼠标会始终是箭头，即使在链接和输入框上方。</li><li>在 `none` 区域，鼠标指针会消失。</li></ul></p></body>
</html>
在上面的例子中，你会观察到：
- 在第一个
div(auto-cursor) 中，当鼠标移到p标签上是默认箭头，移到链接<a>上会变成手形，移到input框上会变成I形。 - 在第二个
div(default-cursor) 中，无论鼠标移到p、a还是input上，都始终是普通的箭头。 - 在第三个
div(none-cursor) 中，只要鼠标进入该区域，指针就会完全消失。