事件泡沫问题（我猜......！）

Question

我有一个大 DIV #bigdiv。当我将其悬停时，我希望在大 div 内显示一个信息丰富的小 DIV #info。问题：当我将鼠标放在 #info 上时（一旦我通过悬停 #bigdiv 使其出现），它会使其 (#info) 无限地出现和消失。这是我的代码：

jQuery('#bigdiv').live("hover", function(){ 
    jQuery("#info").toggle();
});

更新

我尝试了 mashappslabs 的解决方案（mouseenter/mouseleave），并且尝试了 TJ Crowder 的解决方案（不使用 live()）：结果相同。

在这两种情况下，小 div 仍然会出现并永远消失。

Answer 1

它看起来像是 hover 的 live 版本中的一个小错误。将使用 live 的此示例与这个 实际上在 bigdiv 上使用事件处理程序（计数器在那里，所以我们知道事情何时发生变化）。问题是当您将鼠标移入 info div（单词“info”）并移出它（仍在 bigdiv 内）时。因此，答案可能是不要使用 live，尽管我猜测您有使用 live 的理由，因此这可能会带来不便。

您可能知道 hover 基本上只是 mouseenter 和 mouseleave 的组合（它们是 IE 特定的事件，但 jQuery 在浏览器上模拟它们不要提供它们）。但是 mouseenter 和 mouseleave 不会冒泡；这就是它们有用的部分原因。不过，相关的（而不是特定于 IE 的）mouseover 和 mouseout 事件会冒泡，因此这看起来可能是特定于委托处理的 mouseenter / mouseleave 模拟。 （编辑：具体来说，bug #9069，已报告并正在积极开展工作。）

Answer 2

@glabus

使 #info 位置绝对，

#info{
position:absolute;
top: 20px;
left:40px;
}

您也可以使用 jquery.css 动态设置顶部和左侧

Answer 3

使用 mouseenter 和 mouseleave，查看 http://jsfiddle.net/2aCJ2/ 的工作示例，这里是代码:
CSS：

#big {width: 500px; height:500px; border: 1px solid #ccc; padding: 10px;}
#info {display: none; border: 2px solid #ddd;}

HTML：

<div id="big">
 <div id="info">
    <p>Hello I'm visible</p>
 </div>
</div>    

jQuery：

$("#big")
.mouseenter(function(e) {
    $("#info").show();
})
.mouseleave(function(e) {
    $("#info").hide();
});

希望有帮助。干杯