自定义鼠标悬停样式优化：解决子元素触发失效问题

直接修改事件监听的判断逻辑，使用浏览器原生的closest()方法替代matches()，同时完善鼠标移出时的处理逻辑，就能在不遍历父级、不给子元素加类的前提下实现需求，且性能优异：

// 获取自定义光标元素
const customCursor = document.querySelector('.custom-cursor');

// 鼠标进入时添加hover类
document.addEventListener("mouseover", function (e) {
  if (e.target.closest('.black-cursor')) {
    customCursor.classList.add("is-hovering");
  }
});

// 鼠标移出时移除hover类（需确认是否完全离开目标区域）
document.addEventListener("mouseout", function (e) {
  // 检查鼠标移入的新元素是否仍在.black-cursor范围内
  if (!e.relatedTarget?.closest('.black-cursor')) {
    customCursor.classList.remove("is-hovering");
  }
});

方案优势： #

• 高性能：closest()是浏览器原生实现的DOM方法，内部经过优化，比手动遍历父级节点快得多；且仅在mouseover/mouseout事件触发时执行判断，不会在mousemove这类高频事件中重复计算，性能开销极低。
• 无需额外修改DOM：不用给子元素批量添加类，也不用手动遍历父级，开发成本低。
• 逻辑严谨：mouseout事件中通过e.relatedTarget判断鼠标是否只是在.black-cursor的子元素间移动，避免不必要的类切换。

关于requestAnimationFrame的说明： #

requestAnimationFrame在这里并不适用，因为我们不需要每一帧都检测光标位置。事件驱动的方式更高效——只有当鼠标的进入/离开行为触发时才执行逻辑，完全满足需求且性能更优。

内容的提问来源于stack exchange，提问作者dominotrix