工具提示随光标移动

Tooltip moving with cursor

本文关键字：移动 光标 工具提示      更新时间：2023-09-26

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代码...我让你们告诉我。谢谢。

尝试以下代码，无需更改 css，如以下 http://jsfiddle.net/bo113jxu/8/所示：

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

编辑：

只要只有一个.li1元素，position:absolute就可以正常工作，但是如果我们有更多.li1元素，我们将面临此jsfiddle演示1中显示的问题;要解决此问题，应将.li1 position设置为fixed jsfiddle demo2。就像@ViktorMaksimov Kudos在他的回答中所说的那样，我错了。

CSS 代码：

.li1 span {
  position: fixed;
  margin-left: -110px;
}

j查询代码：

$(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，因为工具提示不完全靠近鼠标，因为如果您移动鼠标的速度足够快，工具提示将隐藏。我们将左边距设置为工具提示 - 负值其宽度的一半，以使工具提示居中鼠标。

相关文章：