Why child's css hover not work while body has event listener?-CodePudding

Here is the repo link:https://codepen.io/Jaycethanks/pen/WNJqdWB

I want the body and imgs container has parallax effect, and also the img scale up while hover. but the hover not work. while body has an event listener

<body>
  <div >
    <div >
      <!-- prettier-ignore -->
      <div >
        <div >
          <img src:'xxx'/>
.......

.box-item:hover {
  transform: scale(1.5) translateZ(50px);
  transition: 0.1s all ease;
}

  body.addEventListener("mousemove", (e) => {
    const { pageX, pageY } = e;
    setPointerPosition(pageX, pageY);
    const [xCent, yCent] = computedPointerPositionPercent(pageX, pageY, 12);
    // 50 是基于 background-position : 50% 50% 变化

    body.style.backgroundPosition = `${xCent   50}% ${yCent   50}%`;
  });

CodePudding user response：

Removing body.addEventListener works. As for why it didn't work, you are always hovering centerPointerDot.

If body.addEventListener is only for cursor image, you could achieve that by css cursor property:

body.custom-cursor {
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

https://stackoverflow.com/a/18551357/4036999