JS实现父元素Hover时显示自定义光标，排除子元素问题排查

你的代码存在两个核心问题：

1. 选择器逻辑错误：$("#modal-root:not(.modal)") 这个选择器毫无意义——#modal-root 本身就没有 .modal 类，所以它还是会选中整个 #modal-root 元素，无法区分父元素和子元素。
2. 事件冒泡导致的判断失效：当鼠标移到子元素（.modal 或 .content）上时，mouseover 事件会冒泡到父元素 #modal-root，导致 hover 的移入事件持续触发，无法正确隐藏光标。

我们需要通过事件目标判断来区分鼠标是悬停在父元素本身还是子元素上，同时修正选择器逻辑：

修改后的完整代码 #

HTML（无需改动） #

<section id="modal-root">
  <div class="modal">
     <div class="content"></div>
  </div>
</section>
<!-- 确保页面中存在自定义光标元素 -->
<div class="cursor"></div>

CSS（无需改动） #

.cursor {
  position: fixed;
  top: calc(50vh - 50px);
  left: calc(50vw - 50px);
  cursor: none;
  content: url(../cursor.gif);
  width: 1.8%;
  z-index: 5000!important;
  opacity:0;
}

.cursor-visible {
  opacity:1;
}

JS（核心修改） #

// 自定义光标跟随逻辑（保留）
window.addEventListener("mousemove", function(event){
    const cursor = $(".cursor")[0];
    cursor.style.top = (event.clientY + 15) + "px";
    cursor.style.left = (event.clientX + 15) + "px";
});

// 光标显示/隐藏逻辑（修改部分）
const modalRoot = $("#modal-root");

modalRoot.on("mouseover", function(event) {
    // 只有当鼠标直接悬停在#modal-root本身时，显示光标
    if (event.target === this) {
        $(".cursor").addClass("cursor-visible");
    } else {
        // 悬停在子元素上时，隐藏光标
        $(".cursor").removeClass("cursor-visible");
    }
});

modalRoot.on("mouseleave", function() {
    // 完全离开#modal-root区域时，隐藏光标
    $(".cursor").removeClass("cursor-visible");
});

• 用 mouseover 代替 hover 事件，方便通过 event.target 判断当前触发事件的元素是父元素还是子元素。
• 当 event.target === this 时，说明鼠标直接落在 #modal-root 本身（没有覆盖子元素），此时显示自定义光标。
• 当鼠标移到子元素上时，event.target 会是子元素（.modal 或 .content），此时移除显示类，隐藏光标。
• mouseleave 事件确保鼠标完全离开 #modal-root 区域时，光标会隐藏。

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