工具提示与光标一起移动

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

尝试使用此代码，无需更改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元素，我们将遇到这个jsfiddle demo1中显示的问题； 解决这个问题的position的.li1 应设置fixed 的jsfiddle DEMO2 ..就像什么@ViktorMaksimov ^荣誉在他的回答，我误以为这说。

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，因为工具提示不完全是鼠标旁边，因为如果您足够快地移动鼠标，则工具提示将隐藏。 并且我们将工具栏的左边距设置为-宽度一半的负值，以使工具栏居中于鼠标。