Jquery Hidden DIV Mouseover工具提示

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();
});

这是发生了什么:

1. mousemove为每个列表项附加事件的事件处理程序.
2. 在此侦听器内部,该find方法用于查找生成在事件发生的div类tooltip下的with类li.
3. 的top和leftCSS特性可根据事件发生上(鼠标的当前位置)的位置设置,并且div被示出.
4. mouseout附加了该事件的另一个事件处理程序,它隐藏了正在显示的任何工具提示.

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