工具提示随光标移动

Question

图片

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

试试这个代码，不需要更改 css，如http://jsfiddle.net/bo113jxu/8/所示：

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

编辑：

position:absolute只要只有一个.li1元素，它就会很好地工作，但是如果我们有更多.li1元素，我们将面临这个jsfiddle demo1 中显示的问题；解决这个问题的position的.li1 应设置为fixed 的jsfiddle DEMO2 ..就像什么@ViktorMaksimov ^荣誉在他的回答，我误以为这说。