События входа и выхода мыши не работают с событием перемещения мыши

Я пытаюсь создать собственный курсор и обнаружить наведение на некоторые элементы, но событие входа и выхода мыши не работает должным образом, когда я раскомментирую 2 строки в событии перемещения мыши. Однако это работает, когда я удаляю свойство преобразования моего курсора по неизвестной причине.

Я попытался вычесть половину размера моего курсора в событии перемещения мыши вместо свойства преобразования, но у меня тот же результат.

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>


javascript css mouse-cursor mouseenter mouseleave
person heskir    schedule 14.02.2021    source источник
comment
Ваш фрагмент, кажется, работает хорошо   -  person Adarsh Mohan    schedule 15.02.2021
comment
Да, потому что две строки, о которых я говорю, закомментированы   -  person heskir    schedule 15.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте pointer-events:none в CSS элемента cursor.

Свойство pointer-events позволяет управлять тем, как элементы HTML реагируют на события мыши/касания, включая состояния наведения/активности CSS, события щелчка/касания в Javascript, а также видим ли курсор.

Основной вариант использования событий указателя — позволить поведению щелчка или касания «проходить» через элемент к другому элементу, находящемуся под ним по оси Z.

Источник — https://css-tricks.com/almanac/properties/p/pointer-events/

person Lakshya Thakur    schedule 14.02.2021