鼠标进入和鼠标离开事件不适用于鼠标移动事件

问题描述

我正在尝试创建自定义光标并检测某些元素上的悬停，但是当我取消注释鼠标移动事件中的 2 行时，鼠标进入和鼠标离开事件无法正常工作。 但是，当我出于未知原因删除光标的转换属性时，它会起作用。

我尝试在鼠标移动事件中减去光标大小的一半，而不是使用 transform 属性，但结果相同。

const cursor = document.querySelector(".cursor");
const elHover = document.querySelectorAll("img");

let mouse = {
  x: undefined,y: undefined,};

document.addEventListener("mousemove",(e) => {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
  // cursor.style.top = e.pageY + "px";
  // cursor.style.left = e.pageX + "px";
});

elHover.forEach((element) => {
  element.addEventListener("mouseenter",(e) => {
    // console.log("enter");
    document.querySelector("body").style.backgroundColor = "red";
  });

  element.addEventListener("mouseleave",(e) => {
    // console.log("leave");
    document.querySelector("body").style.backgroundColor = "blue";
  });
});

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

body {
  height: 100vh;
  background-color: #1d3557;
  color: white;
  font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
}

.cursor {
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  border: 2px white solid;
  z-index: 999;

  transform: translate(-50%,-50%);
}

 <div class="gallery">
      <img src="https://picsum.photos/200" alt="" />
      <img src="https://picsum.photos/200" alt="" />
      <img src="https://picsum.photos/200" alt="" />
      <img src="https://picsum.photos/200" alt="" />
      <img src="https://picsum.photos/200" alt="" />
      <img src="https://picsum.photos/200" alt="" />
    </div>
    <div class="cursor"></div>

解决方法

将 pointer-events:none 添加到 cursor 元素的 css。

pointer-events 属性允许控制 HTML 元素如何 响应鼠标/触摸事件——包括 CSS 悬停/活动状态， Javascript 中的单击/点击事件，以及光标是否在 可见。

指针事件的主要用例是允许点击或点击 “通过”一个元素到它下面的另一个元素的行为 Z 轴。

来源 - https://css-tricks.com/almanac/properties/p/pointer-events/