如果我移动鼠标，绝对Div会持续闪烁 [英] absolute Div keeps on flickering if i move my mouse

问题描述

这是我到目前为止所取得的成就:

Here is what i have achieved so far:

如果我将鼠标移动到红色图像的任何地方，鼠标指针上将出现一个div.

A div will appear on the pointer of my mouse if i will move my mouse anywhere red image.

这是我的代码:

HTML

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

CSS

.cclass {
position:absolute;
background-color:orange;
height:125px;
width:175px;
top:0px;
left:0px;
display:none;
}

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持续闪烁.我应该怎么做才能避免这种情况?

It works as intended but the problem is that, the div keeps on flickering. What should i do to avoid that?

这是我的红色框的代码:

this is code for my red box:

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

推荐答案

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

Providing a little gap between the cursor and the box-position resolves the issue. In the snippet below, I've set a 15px gap on the X-axis.

$('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 + 15
    });
  }
});

.cclass {
  position: absolute;
  background-color: orange;
  height: 125px;
  width: 175px;
  top: 0px;
  left: 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="sorc" src="http://placehold.it/350x150" />
<div id="test" class="cclass" style="border:solid">
  name:blahblah
  <br />name:blahblah
  <br />name:blahblah
  <br />
</div>

这篇关于如果我移动鼠标，绝对Div会持续闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！