Javascript 随光标移动的工具提示

ul#listcontainer.li1{
显示：块；
宽度：210px；
高度：130像素；
边框：1px纯红；
位置：相对位置；
}
.li1跨度{
位置：绝对位置；
顶部：140px；
左：0px；
右：0；
宽度：220px；
填充：2px0；
背景色：#000；
背景色：rgba（0,0,0,0.65）；
颜色：#fff；
不透明度：0；
过渡：不透明度。5s缓进缓出；
文本对齐：居中；
字体系列：Arial；
字体大小：14px；
}
.li1：悬停跨度{
不透明度：1；
}
.li1:悬停范围：悬停{
不透明度：0；
}

外观：
最小磨损，战斗伤痕

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

首先，工具提示的位置应该是固定的。 当您在

元素内移动鼠标时，工具提示将具有左位置-鼠标在窗口X上的位置，以及鼠标在Y上的顶部位置+20，因为工具提示不会正好靠近鼠标，因为如果您移动鼠标足够快，工具提示将隐藏。

---

我们正在设置工具提示的左边距-负值为其宽度的一半，以使工具提示位于鼠标的中心。

尝试此代码，无需更改css，如下所示：

---

编辑：

---

位置：只要只有一个
.li1
元素，绝对的
就可以正常工作，但是如果我们有更多的
.li1
元素，我们将面临如下所示的问题；要解决此问题，应将
.li1
的
位置设置为
fixed
。。正如kudos在他的回答中所说，我错了。
你能定义“跟随”鼠标吗？不需要是固定的，它与绝对的一起工作。你是对的，如果你有多个
，它应该是固定的
位置以避免这种行为。li1
项。。向上投票
$('.li1').mousemove(function (e) {
    $('span', this).css({left: e.pageX - 100, top: e.pageY + 10});
});