Javascript 鼠标进入和鼠标离开事件不发生'；无法使用鼠标移动事件

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

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

const cursor=document.querySelector（“.cursor”）；
const elHover=document.queryselectoral（“img”）；
让鼠标={
x:未定义，
y:未定义，
};
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（（元素）=>{
元素。addEventListener（“鼠标指针”，（e）=>{
//控制台日志（“输入”）；
document.querySelector（“body”）.style.backgroundColor=“红色”；
});
元素。addEventListener（“mouseleave”，（e）=>{
//控制台日志（“离开”）；
document.querySelector（“body”）.style.backgroundColor=“蓝色”；
});
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：100vh；
背景色：#1d3557；
颜色：白色；
字体系列：“投石机MS”、“Lucida Sans Unicode”、“Lucida Grande”，
“Lucida Sans”，Arial，无衬线；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.画廊{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr；
栅隙：10px；
}
.光标{
宽度：40px；
高度：40px；
位置：绝对位置；
边界半径：50%；
边框：2倍白色固体；
z指数：999；
转换：翻译（-50%，-50%）；
}
添加
指针事件：无
到
光标
元素的css

指针事件属性允许控制HTML元素的显示方式
响应鼠标/触摸事件–包括CSS悬停/活动状态，
单击/点击Javascript中的事件，以及光标是否处于活动状态
看得见

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

Source-
您的代码片段似乎运行良好是的，这是因为我正在谈论的两行代码都被注释了