我已经创建了一个自定义光标效果。我想在特定的<div>及其子女中使用mouseenter事件后使用它。它有效，但是即使我不离开<div>，它也会显示并躲藏起来。我希望悬停后只有一个开始，然后在mouseleave之后停下来。
代码在这里：
$(document).ready(function() {
$("#rowek")
.mouseenter(function(event) {
$("#follower").show();
})
.mouseleave(function() {
$("#follower").hide();
});
});
$(document).ready(function() {
(function() {
var follower, init, mouseX, mouseY, positionElement, printout, timer;
follower = document.getElementById('follower');
printout = document.getElementById('printout');
mouseX = (event) => {
return event.pageX;
};
mouseY = (event) => {
return event.pageY;
};
positionElement = (event) => {
var mouse;
mouse = {
x: mouseX(event),
y: mouseY(event)
};
follower.style.top = mouse.y + 'px';
return follower.style.left = mouse.x + 'px';
};
timer = false;
window.onmousemove = init = (event) => {
var _event;
_event = event;
return timer = setTimeout(() => {
return positionElement(_event);
}, 1);
};
}).call(this);
});.rowek-bgr {
background-color: #313343;
display: flex;
justify-content: center;
}
.child {
padding: 15px;
width: auto!important;
}
.child-txt {
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
color: white;
}
.child-special-txt {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
color: white;
}
#follower {
position: absolute;
top: 50%;
left: 50%;
display: none;
}
#follower #circle1 {
position: absolute;
-webkit-animation: pulse 2s infinite;
/* Chrome, Safari, Opera */
animation: pulse 2s infinite;
background: #fff;
border-radius: 50%;
height: 0em;
width: 0em;
margin-top: 0em;
margin-left: 0em;
}
#follower #circle2 {
position: absolute;
-webkit-animation: pulse 4s infinite;
/* Chrome, Safari, Opera */
animation: pulse 4s infinite;
background: rgba(200, 0, 0, 0.8);
border-radius: 50%;
height: 0em;
width: 0em;
margin-top: 0em;
margin-left: 0em;
}
@-moz-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@-webkit-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@-o-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="rowek">
<div class="col-md-12 rowek-bgr">
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for adults</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for childrens</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for students</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for grands</span>
</div>
</div>
</div>
<div id="follower">
<div id="circle1"></div>
<div id="circle2"></div>
</div>实时演示。
问题是您正在用于效果的div；它进入鼠标下方并在其背后的元素之前捕获事件，然后当您移动它时，它再次触发事件，因为鼠标再次在背景元素上。
解决的一种方法是将pointer-events: none;添加到#follower元素的CSS。
另外，不是问题的一部分，但是由于您使用的是jQuery，您应该将其用于所有事件处理，而不是在普通的JavaScript事件中进行混合。
$(document).ready(function() {
$("#rowek")
.mouseenter(function() {
$("#follower").show();
})
.mouseleave(function() {
$("#follower").hide();
});
});
$(document).ready(function() {
var follower, init, mouseX, mouseY, positionElement, printout, timer;
follower = document.getElementById('follower');
printout = document.getElementById('printout');
mouseX = (event) => {
return event.pageX;
};
mouseY = (event) => {
return event.pageY;
};
positionElement = (event) => {
var mouse;
mouse = {
x: mouseX(event),
y: mouseY(event)
};
follower.style.top = mouse.y + 'px';
return follower.style.left = mouse.x + 'px';
};
timer = false;
$(window).mousemove(function(_event){
return timer = setTimeout(() => {
return positionElement(_event);
}, 1);
})
});.rowek-bgr {
background-color: #313343;
display: flex;
justify-content: center;
}
.child {
padding: 15px;
width: auto!important;
}
.child-txt {
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
color: white;
}
.child-special-txt {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
color: white;
}
#follower {
position: absolute;
top: 50%;
left: 50%;
display: none;
pointer-events: none;
}
#follower #circle1 {
position: absolute;
-webkit-animation: pulse 2s infinite;
/* Chrome, Safari, Opera */
animation: pulse 2s infinite;
background: #fff;
border-radius: 50%;
height: 0em;
width: 0em;
margin-top: 0em;
margin-left: 0em;
}
#follower #circle2 {
position: absolute;
-webkit-animation: pulse 4s infinite;
/* Chrome, Safari, Opera */
animation: pulse 4s infinite;
background: rgba(200, 0, 0, 0.8);
border-radius: 50%;
height: 0em;
width: 0em;
margin-top: 0em;
margin-left: 0em;
}
@-moz-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@-webkit-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@-o-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="rowek">
<div class="col-md-12 rowek-bgr">
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for adults</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for childrens</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for students</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for grands</span>
</div>
</div>
</div>
<div id="follower">
<div id="circle1"></div>
<div id="circle2"></div>
</div>首先，您不需要在#Forloter上使用超时当鼠标悬停时，您可以得到每个孩子的位置因此，我删除了您的代码的一部分
第二，用您的方法，当鼠标悬停孩子时，#Folower出现了，但在鼠标下方，因此脚本将在Folower Child上称为Mouseleve，因此Folwer会在此之后躲藏起来这是一个快速的递归动作
`$(document).ready(function() {
var follower = $('#follower');
$("#rowek .child").each(function(){
$(this).hover(function(event) {
var offset = $(this).offset();
$("#follower").show().css({top : offset.top+$(this).height()+50, left : offset.left+(($(this).width()/2)+10)});
event.preventDefault();
}, function(event) {
$("#follower").hide();
event.preventDefault();
})
});
});` .rowek-bgr {
background-color: #313343;
display: flex;
justify-content: center;
}
.child {
padding: 15px;
width: auto!important;
}
.child-txt {
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
color: white;
}
.child-special-txt {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
color: white;
}
#follower {
position: absolute;
top: 50%;
left: 50%;
display: none;
}
#follower #circle1 {
position: absolute;
-webkit-animation: pulse 0.5s infinite;
/* Chrome, Safari, Opera */
animation: pulse 0.5s infinite;
background: #ffb83f;
border-radius: 50%;
height: 0em;
width: 0em;
margin-top: 0em;
margin-left: 0em;
}
#follower #circle2 {
position: absolute;
-webkit-animation: pulse 0.7s infinite;
/* Chrome, Safari, Opera */
animation: pulse 0.8s infinite;
background: rgba(200, 0, 0, 0.5);
border-radius: 50%;
height: 0em;
width: 0em;
margin-top: 0em;
margin-left: 0em;
}
@-moz-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@-webkit-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@-o-keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}
@keyframes pulse {
0% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
50% {
opacity: 0.9;
height: 3em;
width: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
}
100% {
opacity: 0.2;
height: 1em;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="rowek">
<div class="col-md-12 rowek-bgr">
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for adults</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for childrens</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for students</span>
</div>
<div class="col-md-2 child">
<span class="child-txt">Test</span> <span class="child-special-txt">for grands</span>
</div>
</div>
</div>
<div id="follower">
<div id="circle1"></div>
<div id="circle2"></div>
</div>