javascript - 随光标移动的工具提示

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});
});

---

编辑:

只要只有一个 .li1 元素，position:absolute 就可以正常工作，但万一我们有更多的 .li1 元素我们会遇到这个 jsfiddle demo1 中显示的问题;要解决此问题，.li1 的position 应该 设置为fixed jsfiddle demo2 .. 就像什么@ViktorMaksimov ^kudos 在他的回答中说我错了。