当全局设置 `* { cursor: url(...) }` 后，对特定元素（如 `.hover:hover`）应用另一张自定义光标图像时，浏览器可能仍显示全局光标——根本原因常是 dom 结构嵌套（如 `` 包裹文本）导致 hover 事件未准确作用于目标元素。
在 CSS 中使用 cursor: url(...) 设置自定义图像光标是一种常见需求，但其行为比内置光标（如 pointer、progress）更敏感，尤其在层级覆盖与事件冒泡场景下容易失效。你遇到的问题——“.hover:hover 的蓝色光标在开发者工具中被正确计算，但视觉上仍显示全局红色光标”——并非 CSS 优先级或语法错误，而是一个典型的事件目标穿透（event target mismatch）问题。
? 根本原因：DOM 嵌套破坏 hover 作用域
虽然你为 设置了 :hover 样式，但如果其内部存在子元素（如 、 或其他 inline 元素），且这些子元素未显式继承或重置光标样式，那么鼠标实际悬停的是子元素，而非 本身。此时：
- 子元素匹配 * 选择器，应用全局光标（红色）；
- 元素虽满足 .hover:hover，但因未直接捕获鼠标事件，其 cursor 规则未生效；
- 浏览器最终渲染的是最具体、且处于鼠标焦点路径上的元素所声明的 cursor——通常是那个无样式的 。
验证方式：在 DevTools 中将鼠标悬停在链接文字上，右键 → “Reveal in Elements Panel”，观察高亮的 DOM 节点是否为 而非 。
✅ 正确写法：确保 hover 样式作用于实际交互节点
/* 全局默认光标（红色） */
* {
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADYSURBVHgBtZaNDYIwEIWfTIAb6CSOoJvQDWATXcEJGjdwg7JB3eC8M6dBQkqrvS95DZTwXn9IDyABAS2rZ3lWYJEqal/H2qEUeUkNKFPn7CAdVSwwn87KrZn3PxjP1adGTpXkltY8Ur2A+LUnfHOpaP6WF++NJgXYsG24OcEOJwFH2HGQJYp80cKGUQIIhjQwRgJG2PGwDrhLwA12XGWT5QuKsGH/agvP/uwa8YkxP+w0xFUMWC48/GCoYD4ghc7EpmTO9qSkRnj64++iU4PprIL2DbRyUD4BpR/d+UxAbB8AAAAASUVORK5CYII=), auto;
}
/* 关键修复：同时为 .hover 及其所有子元素设置 hover 光标 */
.hover:hover,
.hover:hover *,
.hover:hover :is(span, em, strong, i, b, img, svg) {
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgBtZaNDcIgEIUfnaBuoJM4gm5SNoBN7ApOQNzADegGuAHyc5raWBTlvuS1CUnfg15zV6CI74NUkAmyQZ7kaG0I2qKe+FAy8F/qVBGUduUqzOenkp/M1Q/GS6nSzn0jyXfv3KFdgFvUxI8NzR8y0VlQkgUPmy5cjuBDxoAD+NiLXBD04GESuSB8dGAmBkzg48YdcI0BF/BxFrnnw4GHHd2ren/FjHjC3uxSiGwYsDZ4vG5grlEmnYRrZL7UZKwwN/jj72Igg/mpLK1p+sxXuQO28d358+kFewAAAABJRU5ErkJggg==), auto;
}<!-- ✅ 正确：hover 直接作用于可点击的 a 元素 --> <a href="#" class="hover">Link 3 (works)</a> <!-- ❌ 错误：hover 仅作用于 a，但鼠标实际悬停在 span 上 --> <a href="#" class="hover"><span>Link 3 (fails)</span></a>
? 提示：:is() 是现代 CSS 伪类（支持度 ≥ Chrome 100 / Firefox 100 / Safari 15.4），用于简洁声明多类内联元素；若需兼容旧版浏览器，可展开为 .hover:hover span, .hover:hover em, ...。
⚠️ 其他关键注意事项
- 光标尺寸与热点（hotspot）：Base64 图像需为 32×32 或 64×64 像素（推荐），过大可能导致截断；建议在 url() 后显式指定热点坐标（如 url(...), 16 16, auto），避免偏移。
- 备选光标必须存在：url(...), auto 中的 auto 是 fallback，不可省略；若省略且图片加载失败，光标将消失（表现为系统默认箭头或空白）。
- 性能与缓存：内联 base64 光标会随 CSS 重复解析，生产环境建议改用外部 .cur 或 .png 文件，并启用 HTTP 缓存。
- 移动端无效：iOS 和 Android 浏览器完全忽略 cursor 属性（包括 url()），该方案仅适用于桌面端 Web 应用。
✅ 总结
自定义光标图像在 hover 下“不生效”，90% 的情况源于鼠标事件目标与 CSS 选择器目标不一致。解决核心是：
① 检查实际悬停的 DOM 节点是否为你预期的元素；
② 通过 .hover:hover * 或精准子元素选择器，确保所有后代内容继承 hover 光标；
③ 避免依赖父元素 hover 样式去影响深层嵌套的不可见子节点。
修复后，你将看到蓝色光标精准响应 .hover 元素的悬停——不再被 等“隐形拦截者”劫持。
立即学习“前端免费学习笔记（深入）”；
