Question

Image

ul#listcontainer .li1 {
  display: block;
  width: 210px;
  height: 130px;
  border: 1px solid red;
  position: relative;
}
.li1 span {
  position: absolute;
  top: 140px;
  left: 0px;
  right: 0;
  width: 220px;
  padding: 2px 0;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  text-align: center;
  font-family: Arial;
  font-size: 14px;
}
.li1:hover span {
  opacity: 1;
}
.li1:hover span:hover {
  opacity: 0;
}

<ul id="listcontainer">
  <li class="li1">
    <img src="images/li1.png"><span><b>Exteriors:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br>&nbsp;</span>
  </li>
</ul>

大家好。所以当我用红色边框悬停盒子后，我做了一个工具提示。我想要的是当我将鼠标悬停在带红色边框的div上时 - 工具提示开始用鼠标移动/跟随。试图搜索如何做但我没有找到答案。我想这将是一些jQuery代码......我让你们告诉我。谢谢。

Answer 1

尝试此代码，无需更改此http://jsfiddle.net/bo113jxu/8/中显示的css：

$('.li1').mousemove(function (e) {
    $('span', this).css({left: e.pageX - 100, top: e.pageY + 10});
});

修改

只要只有一个position:absolute元素，.li1就会正常运行，但如果我们有更多.li1元素，我们就会遇到此 {中显示的问题{3}} ;要解决此问题，position 的.li1 应设置为fixed jsfiddle demo1 ..就像jsfiddle demo2 ^赞誉一样在他的回答中说我错了。

Answer 2

CSS代码：

.li1 span {
  position: fixed;
  margin-left: -110px;
}

jQuery代码：

$(document).ready(function() {
 $('.li1').mousemove(function( event ) {
   $(this).find('span').css({    //Position the tooltip
    'left' : event.pageX + 'px', //Left position - the X position of the mouse
    "top" : (event.pageY + 20) + 'px' //Top position - the Y position of the mouse 
   });
 });
});

首先，工具提示应定位固定。当您在<li>元素内移动鼠标时，工具提示将处于左侧位置 - 鼠标X在窗口上的位置，并且顶部位置在鼠标Y的位置上+ 20，因为工具提示不是紧跟在鼠标旁边，因为如果你移动鼠标足够快，工具提示就会隐藏。我们将margin-left设置为工具提示 - 负值的一半，使工具提示以鼠标为中心。

用光标移动的工具提示

2 个答案: