【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`	强制隐藏，优先级最高（在可见性方面）

通过实际例子来感受差异会更直观：

html 复制代码

<!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) 中，只要鼠标进入该区域，指针就会完全消失。

【CSS】cursor: auto, default, none 有什么区别？

1. cursor: auto;

2. cursor: default;

3. cursor: none;

总结比较

1. `cursor: auto;`

2. `cursor: default;`

3. `cursor: none;`