JS - Hover on parent, exclude child-CodePudding

I'm not just a graphic designer but I need to tweak a function on a page.

I would like to make a cursor visible when the mouse hovers over a div excluding its child.

Here is what I did:

HTML

<section id="modal-root">
  <div >
     <div ></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");
  }
);

It works but it does not exclude the child. Could you tell me where I went wrong ?

CodePudding user response：

As said before, I think you don't need the Javascript and can solve this through CSS.

Try:

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

#modal-root .modal{
  cursor: default
}

CodePudding user response：

Thank you for your answers.

@Luke, I can't go through CSS because I want an image that is added to my cursor and not a change of cursor

@CBroe, Could you tell me more? How would you do? I did that but it doesn't work...

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