Javascript 如果我移动鼠标，绝对Div将继续闪烁

以下是我迄今为止取得的成就：

如果我将鼠标移动到红色图像的任何位置，鼠标指针上将出现

div

这是我的密码：

HTML

<div id="test" class="cclass" style="border:solid">
name:blahblah <br />
name:blahblah <br />
name:blahblah <br />
</div>

JQuery

$('img#sorc').on('mousemove mouseleave',function (e) {


     if (e.type == 'mouseleave'){
     $('div#test').css('display', 'none');

     }                

     else {

     $('div#test').css({

           'display': 'block',
           'top': e.pageY,
           'left': e.pageX

           });
         }
});

它按预期工作，但问题是，div一直在闪烁。我应该做些什么来避免这种情况

编辑：

这是我的红色方框的代码：

<img id="sorc" src="~/photos/test.jpg" />

---

在光标和方框位置之间提供一点间隙可以解决问题。在下面的代码片段中，我在X轴上设置了一个

15px

间隙

$（'img#sorc'）。on（'mousemove mouseleave'，函数（e）{
如果（e.type=='mouseleave'）{
$（'div#test'）.css（'display'，'none'）；
}否则{
$（'div#test'）.css({
“显示”：“块”，
“顶部”：e.pageY，
“左”：e.pageX+15
});
}
});
.cclass{
位置：绝对位置；
背景颜色：橙色；
高度：125px；
宽度：175px；
顶部：0px；
左：0px；
显示：无；
}

姓名：布拉布拉赫

名称：布拉布拉赫布拉赫

名称：布拉布拉赫布拉赫


在光标和方框位置之间提供一点间隙可以解决问题。在下面的代码片段中，我在X轴上设置了一个
15px
间隙


$（'img#sorc'）。on（'mousemove mouseleave'，函数（e）{
如果（e.type=='mouseleave'）{
$（'div#test'）.css（'display'，'none'）；
}否则{
$（'div#test'）.css({
“显示”：“块”，
“顶部”：e.pageY，
“左”：e.pageX+15
});
}
});
.cclass{
位置：绝对位置；
背景颜色：橙色；
高度：125px；
宽度：175px；
顶部：0px；
左：0px；
显示：无；
}

姓名：布拉布拉赫

名称：布拉布拉赫布拉赫

名称：布拉布拉赫布拉赫


为您创建了一个问题

稍微修改一下HTML代码。添加了一个父项和相对于该父项的给定位置

<div style="position:relative">
    <img id="sorc" src="~/photos/test.jpg" />
    <div id="test" class="cclass" style="border:solid">name:blahblah
        <br />name:blahblah
        <br />name:blahblah
        <br />
    </div>
</div>


姓名：布拉布拉赫

名称：布拉布拉赫布拉赫

名称：布拉布拉赫布拉赫


为您创建了一个问题

稍微修改一下HTML代码。添加了一个父项和相对于该父项的给定位置

<div style="position:relative">
    <img id="sorc" src="~/photos/test.jpg" />
    <div id="test" class="cclass" style="border:solid">name:blahblah
        <br />name:blahblah
        <br />name:blahblah
        <br />
    </div>
</div>


姓名：布拉布拉赫

名称：布拉布拉赫布拉赫

名称：布拉布拉赫布拉赫



$（'img#sorc'）。on（'mousemove mouseleave'，函数（e）{
如果（e.type=='mouseleave'）{
$（'div#test'）.css（'display'，'none'）；
}否则{
$（'div#test'）.css({
“显示”：“块”，
“顶部”：e.pageY，
“左”：e.pageX
});
}
});
.container{
位置：相对位置；
}
.C类{
位置：绝对位置；
背景颜色：橙色；
高度：125px；
宽度：175px；
顶部：0px；
左：0px；
显示：无；
}

姓名：布拉布拉赫

名称：布拉布拉赫布拉赫

名称：布拉布拉赫布拉赫



$（'img#sorc'）。on（'mousemove mouseleave'，函数（e）{
如果（e.type=='mouseleave'）{
$（'div#test'）.css（'display'，'none'）；
}否则{
$（'div#test'）.css({
“显示”：“块”，
“顶部”：e.pageY，
“左”：e.pageX
});
}
});
.container{
位置：相对位置；
}
.C类{
位置：绝对位置；
背景颜色：橙色；
高度：125px；
宽度：175px；
顶部：0px；
左：0px；
显示：无；
}

姓名：布拉布拉赫

名称：布拉布拉赫布拉赫

名称：布拉布拉赫布拉赫


您可以执行以下操作：

$('#sorc').on('mousemove mouseleave',function (e) {


     if (e.type == 'mouseleave'){
     $('div#test').css('display', 'none');

     }                

     else {

     $('div#test').css({

           'display': 'block',
           'top': e.pageY,
           'left': e.pageX

           });
         }
});

这里是我的
您可以执行以下操作：

$('#sorc').on('mousemove mouseleave',function (e) {


     if (e.type == 'mouseleave'){
     $('div#test').css('display', 'none');

     }                

     else {

     $('div#test').css({

           'display': 'block',
           'top': e.pageY,
           'left': e.pageX

           });
         }
});

这里我的
唯一的事情是你的鼠标干扰了你的blaah图像，为你的光标位置添加足够的边距，例如pageY+10，e.pageX+10，或者如其中一个答案所述，使你的容器相对
唯一的事情是你的鼠标干扰了你的blaah图像，为你的光标位置添加足够的边距，e.pageY+10，e.pageX+10，或如其中一个答案中所述，使您的容器相对
此代码是否再现了您的问题？否，但我不确定是否是因为我的方法。我的代码可以工作，但是
div
不停地闪烁，而不是稳定地显示。代码中的红色框在哪里？你能发布小提琴吗？更新了。这只是一个普通的img标签。这段代码再现了你的问题吗？没有，但我不确定这是否是因为我的方法。我的代码可以工作，但是
div
不停地闪烁，而不是稳定地显示。代码中的红色框在哪里？你能发布小提琴吗？更新了。这只是一个普通的img标签。嗯，这很奇怪，所以唯一的区别是添加15px？@CarlosMiguelColanta你可以添加任何边距。我把
15px
放进去，因为我的光标大约有那么宽，让我可以看到悬停时的整个方框。呃，这很奇怪，所以唯一的区别就是加上15px？@CarlosMiguelColanta你可以加任何边距。我把
15px
放进去，因为我的光标大约有那么宽，让我可以看到悬停的整个盒子。@CarlosMiguelColanta Welcome mate@CarlosMiguelColanta欢迎伙伴！