JS-悬停在父级，排除子级

Question

当鼠标悬停在不包括其子级的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;
}

JS

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

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

Answer 1

如前所述，我认为您不需要Javascript，可以通过CSS解决此问题。

尝试：

#modal-root{
cursor: url('../cursor.gif');
}
#modal-root .modal{
cursor: default
}