本文详解如何解决自定义 CSS/JS 鼠标光标（.cursor）遮挡元素导致 mouseenter/mouseleave 失效的问题，并提供精简可靠的单事件驱动方案，实现 cursor-moving、cursor-idle 和 cursor-hover 三态精准切换。

本文详解如何解决自定义 css/js 鼠标光标（`.cursor`）遮挡元素导致 `mouseenter`/`mouseleave` 失效的问题，并提供精简可靠的单事件驱动方案，实现 `cursor-moving`、`cursor-idle` 和 `cursor-hover` 三态精准切换。

在构建高级自定义光标效果时，一个常见却容易被忽视的问题是：自定义光标 DOM 元素（如

）因设置了高 z-index 而覆盖了底层可交互元素（如 或 ），导致原生悬停事件无法触发。你原本分别监听 mouseenter/mouseleave 的思路逻辑正确，但因 .cursor 挡住了目标元素，这些事件根本不会冒泡到 document 层——因此 handleLinkEnter 和 handleLinkLeave 几乎从不执行，造成 cursor-hover 类“闪现即逝”。

✅ 正确解法是 放弃独立监听悬停事件，改用 mousemove 中实时判断 event.target，并配合关键 CSS 修复：

1. 核心 CSS 修复：让光标“不可点击”

为 .cursor 添加 pointer-events: none，使其完全透传鼠标事件到底层元素：

.cursor {
  pointer-events: none; /* ✅ 关键！否则光标会拦截所有 hover/mouseover */
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  left: 0;
  top: 0;
  z-index: 666; /* 仍需足够高以显示，但不可阻挡交互 */
}

⚠️ 注意：z-index: 999999 虽能确保显示层级，但若未设 pointer-events: none，它将变成一层“隐形玻璃”，彻底阻断用户与下方链接的交互。

2. 精简 JS 逻辑：单事件驱动三态切换

删除冗余的 mouseenter/mouseleave 监听器，仅保留 mousemove，并在其中同步判断移动状态和悬停目标：

const customCursor = document.querySelector('.cursor');
let isCursorMoving = false;
let cursorIdleTimeout;

function updateCursor(event) {
  const { clientX, clientY } = event;

  // 更新光标位置（推荐使用 transform 提升性能）
  customCursor.style.transform = `translate3d(${clientX}px, ${clientY}px, 0)`;

  // ✅ 实时检测是否悬停在 <a> 或 <button> 上
  const isHoverElement = 
    event.target.tagName === 'A' || 
    event.target.tagName === 'BUTTON' ||
    // 可选：支持父级包裹（如按钮内含 span）
    event.target.closest('a, button') !== null;

  document.body.classList.toggle('cursor-hover', isHoverElement);

  // 处理移动/空闲状态
  if (!isCursorMoving) {
    document.body.classList.add('cursor-moving');
    document.body.classList.remove('cursor-idle');
    clearTimeout(cursorIdleTimeout);
  }

  cursorIdleTimeout = setTimeout(() => {
    isCursorMoving = false;
    document.body.classList.remove('cursor-moving');
    document.body.classList.add('cursor-idle');
  }, 1000);
}

window.addEventListener('mousemove', updateCursor);</button></a>

? 提示：使用 event.target.closest('a, button') 可兼容嵌套结构（例如 Text），避免因点击文字而非 标签本身导致检测失败。

3. 补充优化建议

• 禁用系统光标：在全局样式中添加 * { cursor: none; }，防止原生光标与自定义光标重叠。
• 性能增强：transform: translate3d() 触发硬件加速，比修改 left/top 更流畅。
• 空闲检测鲁棒性：若页面存在滚动、缩放等操作，可补充监听 scroll/wheel/touchmove 以重置空闲计时器。
• 无障碍考虑：为屏幕阅读器用户保留语义化结构，可通过 aria-hidden="true" 隐藏 .cursor。

最终效果：当鼠标划过链接时，body.cursor-hover 立即生效（背景变黄），离开后即时移除；移动时显示 cursor-moving，静止 1 秒后自动切为 cursor-idle —— 三态响应精准、无闪烁、无延迟。