Question

我已经很好地研究了这个但是没有设法找到任何东西，自己写它可能会更快！我的内容包含在'li'标签内，li是DIV，这些DIV对用户是隐藏的。我基本上在寻找一些东西，当你将鼠标悬停在特定的li上时，其中包含的div会弹出并在光标位于li上时相对于鼠标悬停。有谁知道会做到这一点？

Answer 1

只需使用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的{{1}}，其中tooltip位于事件发生的li下。
根据事件发生的位置（鼠标的当前位置）设置top和left CSS属性，并显示div。
附加了mouseout事件的另一个事件处理程序，它隐藏了正在显示的任何工具提示。

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

Answer 2

这对你有用吗？

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

我不确定它是否专门处理您的场景，您希望在li的鼠标悬停时显示div的内容，但我知道它可以显示HTML内容。

Answer 3

修改

明白了你的问题。请参阅此页面的来源：

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

在这里，您可以找到符合您需要的代码

Jquery Hidden DIV Mouseover工具提示

3 个答案: