工具提示與光標一起移動

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，因為工具提示不完全是鼠標旁邊，因為如果您足夠快地移動鼠標，則工具提示將隱藏。 並且我們將工具欄的左邊距設置為-寬度一半的負值，以使工具欄居中於鼠標。