javascript - 如果我移动鼠标，绝对Div会持续闪烁

Question

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



如果将鼠标移动到红色图像的任何地方，div将会出现在鼠标指针上。

这是我的代码：

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

编辑：

这是我的红框的代码：

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

Answer 1

在光标和框形位置之间留一点间隙即可解决此问题。在下面的代码段中，我在X轴上设置了15px间隙。

$('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>