Jquery隐藏的DIV鼠标悬停工具提示

问题描述：

我已经研究得很好，但还没有设法找到任何东西，它可能会更快，自己写！我有包含在'li'标签内的内容，其中的内容是对用户隐藏的DIV。我基本上是在寻找一些东西，当你将鼠标悬停在特定的li上时，它所包含的div会一直弹出，并且随着光标在鼠标上的移动而移动。有没有人知道会做到这一点的东西？Jquery隐藏的DIV鼠标悬停工具提示

答

这项工作适合你吗？

http://flowplayer.org/tools/tooltip/index.html

我不知道，如果它专门处理您的情况，要显示出对李的鼠标悬停div的内容，但我知道它可以显示HTML内容。

链接得到错误 – Vinoth 2018-02-20 07:13:29

答

编辑

不明白你的问题。看到源此页：

http://www.lbstone.com/reference/jquery/follow_mouse.html

在这里你可以找到的代码，你想要做

哇感谢大家的快速响应！我选择动态更新css：top：（e.pageY）+“px”等等，但是显示的DIV距离光标很远。我试图将父元素放在相对位置，但最后只有DIV顶部：1000px +，我无法把头转过来，有没有人遇到过麻烦？ – Daniel 2010-12-22 23:40:33

答

你可以只是有点的jQuery和CSS实现这一点的：

HTML：

<ul> 
    <li> 
     <div>Content goes here</div> 
     <div class="tooltip">Tooltip!</div> 
    </li> 
    <li> 
     <div>More content!</div> 
     <div class="tooltip">Another tooltip!</div> 
    </li> 
</ul>

CSS：

.tooltip { 
    position:absolute; 
    display:none; 
    z-index:1000; 
    background-color:black; 
    color:white; 
    border: 1px solid black; 
}

的JavaScript：

$("li").bind("mousemove", function(event) { 
    $(this).find("div.tooltip").css({ 
     top: event.pageY + 5 + "px", 
     left: event.pageX + 5 + "px" 
    }).show(); 
}).bind("mouseout", function() { 
    $("div.tooltip").hide(); 
});

这里发生的事情：

为mousemove事件的事件处理程序连接每一个列表项。
在此聆听者内部，使用find方法找到div的类别tooltip，该类别位于发生该事件的li之下。
top和left CSS属性根据事件发生的位置（鼠标的当前位置）设置，并显示div。
附加mouseout事件的另一个事件处理程序，它隐藏了显示的任何工具提示。

您可以调整选择器以反映您的确切HTML结构。这里有一个工作示例：http://jsfiddle.net/andrewwhitaker/tSHZS/

Jquery隐藏的DIV鼠标悬停工具提示

相关推荐