title: Mouse enter and mouse leave events doesn't work with mouse move event
body: <p>I'm trying to create a custom cursor and detect the hover on some elements but the mouse enter and mouse leave event doesn't work properly when I uncomment the 2 lines in the mouse move event.
  However, It works when I delete the transform property of my cursor for an unkown reason.</p>
  <p>I tried to subtract the half of the size of my cursor in my mouse move event, instead of having the transform property but I have the same result.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cursor = document.querySelector(".cursor");
  const elHover = document.querySelectorAll("img");
  
  let mouse = {
    x: undefined,
    y: undefined,
  };
  
  document.addEventListener("mousemove", (e) =&gt; {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    // cursor.style.top = e.pageY + "px";
    // cursor.style.left = e.pageX + "px";
  });
  
  elHover.forEach((element) =&gt; {
    element.addEventListener("mouseenter", (e) =&gt; {
      // console.log("enter");
      document.querySelector("body").style.backgroundColor = "red";
    });
  
    element.addEventListener("mouseleave", (e) =&gt; {
      // console.log("leave");
      document.querySelector("body").style.backgroundColor = "blue";
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="gallery"&gt;
        &lt;img src="https://picsum.photos/200" alt="" /&gt;
        &lt;img src="https://picsum.photos/200" alt="" /&gt;
        &lt;img src="https://picsum.photos/200" alt="" /&gt;
        &lt;img src="https://picsum.photos/200" alt="" /&gt;
        &lt;img src="https://picsum.photos/200" alt="" /&gt;
        &lt;img src="https://picsum.photos/200" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="cursor"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>