JS - 悬停在父级上，排除子级答案

【问题标题】：JS - Hover on parent, exclude childJS - 悬停在父级上，排除子级
【发布时间】：2022-11-03 18:23:58
【问题描述】：

我不仅仅是一名平面设计师，我还需要调整页面上的功能。

当鼠标悬停在不包括其子项的 div 上时，我想使光标可见。

这是我所做的：

HTML

<section id="modal-root">
  <div class="modal">
     <div class="content"></div>
  </div>
</section>

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;
}

window.addEventListener("mousemove", function(event){
    $(".cursor")[0].style.top = (event.clientY + 15) + "px";
    $(".cursor")[0].style.left = (event.clientX + 15) + "px";
  })


$("#modal-root:not(.modal)").hover(
  function() {
    $(".cursor").addClass("cursor-visible");
  }, function() {
    $(".cursor").removeClass("cursor-visible");
  }
);

它有效，但不排除孩子。你能告诉我哪里出错了吗？

【问题讨论】：

为什么要使用 Javascript 添加类？在CSS中你通常可以使用:hover来达到同样的效果，你的代码没有这样做是有原因的吗？
#modal-root:not(.modal) - ID 为 modal-root 的元素没有 modal 类 - 所以虽然这会选择元素，但它也是相当多余的。
悬停一个元素，也自动意味着悬停它的所有祖先，直到根元素。防止这种情况发生的唯一方法是让孩子根本不对指针事件做出反应（pointer-events: none）——但如果用户确实需要在其他一些地方与之交互，这可能很容易与其他功能发生冲突形式。检查原始事件目标可能会有所帮助。
@Luke我无法通过CSS，因为我想要一个添加到我的光标而不是更改光标的图像
@CBroe 你能告诉我更多吗？你会怎么做？我这样做了，但它不起作用......

标签： javascript jquery dom

【解决方案1】：

谢谢您的回答。

@卢克，我无法通过 CSS，因为我想要一个添加到我的光标而不是光标更改的图像

@CBroe, 你能告诉我更多吗？你会怎么做？我这样做了，但它不起作用......

$("#modal-root").children(":not(.modal)").hover(
  function() {
    $(".cursor").addClass("cursor-visible");
  }, function() {
    $(".cursor").removeClass("cursor-visible");
  }
);

【讨论】：