冲突自定义光标 mousemove 和元素 mouseenter

如何解决冲突自定义光标 mousemove 和元素 mouseenter

问题是关于一些 JS。我需要有一个带有 mouseenter 和 mouseleave 的 eventListener。出于某种原因，代码只适用于 onmouseenter/onmouseleave，但行为类似于 mouSEOver 当光标位于元素上时，它会触发多次。我有一个动画反应，当鼠标进入以及带有鼠标移动的自定义光标时应触发。因此，当进入元素时，mosue 会再次启动动画。任何人都知道如何解决这个问题，或者知道为什么 mouseenter/mouseleave 不起作用？

我的 HTML

<div id="main">
  <div class="cursor"> 
    <div class="cto-overlay">
      text
    </div>
  </div>
</div>

我的 CSS

#main {
background: yellow;
}
.cursor {
  display:block;
  position:absolute;
}

.cto-overlay {
  width: 100%;
  height: 56%;
  background: var(--popUp);
  position: absolute;
  opacity: 0;
  animation: none;
}

我的JS

//Here the Cursor

function customCursor(event){
  const el = document.querySelector(".cursor");
  el.style.top = event.clientY + "px";
  el.style.left = event.clientX + "px";
        }
document.getElementById("main").addEventListener('mousemove',customCursor);

//Here the overlay

var kdg = document.getElementsByClassName("cto-overlay");
var n = kdg.length;

function changeOpacity(opacity) {
    for(var i = 0; i < n; i ++) {
        kdg[i].style.opacity = opacity;
    }
}
for(var i = 0; i < n; i ++) {
    kdg[i].onmouseenter = function() {
        changeOpacity("1");
    };
    kdg[i].onmouseleave = function() {
        changeOpacity("0");
    };
}