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>

Answer 2

为您的问题创建fiddle

稍微修改了您的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>

Answer 3

唯一的问题是你的鼠标干扰你的blaah图像，为你的光标位置增加足够的余量，e.pageY + 10，e.pageX + 10，或者如其中一个答案所述，使你的容器相对

Answer 4

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

.container {
  position: relative;
}
.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.0/jquery.min.js"></script>
<div class="container">

  <img id="sorc" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png " />
  <div id="test" class="cclass" style="border:solid">
    name:blahblah
    <br />name:blahblah
    <br />name:blahblah
    <br />
  </div>

</div>

Answer 5

你可以这样做：

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

           });
         }
});

这是我的Fiddle

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

5 个答案: