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

Question

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 class="box">
    <div class="inner-box">
      <!-- prettier-ignore -->
      <div class="items-wrapper">
        <div class="box-item">
          <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}%`;
  });

your code is working fine for me, can you post a snippet with the issue? — K i, Oct 21 '22 at 03:03

score 1 · Accepted Answer · answered Oct 21 '22 at 05:12

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

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

1 Answers1