Javascript 只处理一次鼠标

我已经创建了自定义光标效果。我想在特定的

及其子项中的

鼠标事件之后使用它。它可以工作，但每次移动后都会显示和隐藏，即使我没有离开
。我只希望鼠标悬停后启动一次，鼠标移动后停止一次

代码如下：


$（文档）.ready（函数（）{
$（“罗威克”）
.mouseenter（函数（事件）{
$（“#follower”）.show（）；
})
.mouseleave（函数（）{
$（“#follower”）.hide（）；
});
});
$（文档）.ready（函数（）{
（功能（）{
变量跟随器，初始化，mouseX，mouseY，positionElement，打印输出，定时器；
follower=document.getElementById（'follower'）；
printout=document.getElementById（'printout'）；
mouseX=（事件）=>{
return event.pageX；
};
鼠标=（事件）=>{
return event.pageY；
};
位置元素=（事件）=>{
var小鼠；
鼠标={
x:mouseX（事件），
y:mouseY（事件）
};
follower.style.top=mouse.y+'px'；
return follower.style.left=mouse.x+'px'；
};
定时器=假；
window.onmousemove=init=（事件）=>{
var_事件；
_事件=事件；
返回计时器=设置超时（（）=>{
返回位置元素（_事件）；
}, 1);
};
}).打电话（这个）；
});
.rowek bgr{
背景色：#313343；
显示器：flex；
证明内容：中心；
}
.孩子{
填充：15px；
宽度：自动！重要；
}
.child txt{
字号：18px；
字体大小：300；
文本转换：大写；
颜色：白色；
}
.child特殊文本{
字号：18px；
字号：800；
文本转换：大写；
颜色：白色；
}
#追随者{
位置：绝对位置；
最高：50%；
左：50%；
显示：无；
}
#跟随器#圈1{
位置：绝对位置；
-webkit动画：脉冲2s无限；
/*铬、狩猎、歌剧*/
动画：脉冲2s无限；
背景：#fff；
边界半径：50%；
高度：0em；
宽度：0em；
页边顶部：0em；
左边距：0em；
}
#跟随器#圈2{
位置：绝对位置；
-webkit动画：脉冲4s无限；
/*铬、狩猎、歌剧*/
动画：脉冲4s无限；
背景：rgba（200,0,0,0.8）；
边界半径：50%；
高度：0em；
宽度：0em；
页边顶部：0em；
左边距：0em；
}
@-moz关键帧脉冲{
0% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
50% {
不透明度：0.9；
高度：3em；
宽度：3em；
边缘顶部：-1.5em；
左边距：-1.5em；
}
100% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
}
@-webkit关键帧脉冲{
0% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
50% {
不透明度：0.9；
高度：3em；
宽度：3em；
边缘顶部：-1.5em；
左边距：-1.5em；
}
100% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
}
@-o-关键帧脉冲{
0% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
50% {
不透明度：0.9；
高度：3em；
宽度：3em；
边缘顶部：-1.5em；
左边距：-1.5em；
}
100% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
}
@关键帧脉冲{
0% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
50% {
不透明度：0.9；
高度：3em；
宽度：3em；
边缘顶部：-1.5em；
左边距：-1.5em；
}
100% {
不透明度：0.2；
高度：1米；
宽度：1米；
边缘顶部：-0.5em；
左边距：-0.5em；
}
}

成人测试
儿童测试
学生考试
孙子测验
问题在于您用于效果的
div
；它位于鼠标下方，在其后面的元素之前捕获事件，然后当您移动它时，它再次触发事件，因为鼠标再次位于背景元素上方

解决这个问题的一种方法是添加
指针事件：none
到
#follower
元素的CSS

此外，这不是问题的一部分，但是由于您使用jQuery，因此应该将其用于所有事件处理，而不是混合在普通JavaScript事件中


$（文档）.ready（函数（）{
$（“罗威克”）
.mouseenter（函数（）{
$（“#follower”）.show（）；
})
.mouseleave（函数（）{
$（“#follower”）.hide（）；
});
});
$（文档）.ready（函数（）{
变量跟随器，初始化，mouseX，mouseY，positionElement，打印输出，定时器；
follower=document.getElementById（'follower'）；
printout=document.getElementById（'printout'）；
mouseX=（事件）=>{
return event.pageX；
};
鼠标=（事件）=>{
return event.pageY；
};
位置元素=（事件）=>{
var小鼠；
鼠标={
x:mouseX（事件），
y:mouseY（事件）
};
follower.style.top=mouse.y+'px'；
return follower.style.left=mouse.x+'px'；
};
定时器=假；
$（窗口）.mousemove（函数（\u事件）{
返回计时器=设置超时（（）=>{
返回位置元素（_事件）；
}, 1);    
})  
});
.rowek bgr{
背景色：#313343；
显示器：flex；
证明内容：中心；
}
.孩子{
填充：15px；
宽度：自动！重要；
}
.child txt{
字号：18px；
字体大小：300；
文本转换：大写；
颜色：白色；
}
.child特殊文本{
字号：18px；
字号：800；
文本转换：大写；
颜色：白色；
}
#追随者{
位置：绝对位置；
最高：50%；
左：50%；
显示：无；
指针事件：无；
}
#跟随器#圈1{
位置：绝对位置；
-webkit动画：脉冲2s无限；
/*铬、狩猎、歌剧*/
动画：