Question

我有一个很大的DIV #bigdiv。当我将它悬停时，我想要一个小的信息DIV #info出现在大div中。问题：当我把鼠标放在#info上时（一旦我通过悬停#bigdiv显示它），它就会使它（#info）出现并无限消失。这是我的代码：

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

更新

我尝试了mashappslabs的解决方案（mouseenter / mouseleave），我尝试了T.J.克劳德的一个（不使用live（））：相同的结果。

在这两种情况下，小div仍会显示并永远消失。

Answer 1

它似乎是live hover版live中的一个小错误。使用bigdiv和this example使用info上的事件处理程序对比this one（计数器就在那里，所以我们知道事情何时发生变化）。问题是当您将鼠标移动到bigdiv div（单词“info”）并从中移出时（仍在live内）。所以答案可能不是使用live，虽然我猜你有理由使用hover，因此可能不方便。

您可能知道mouseenter基本上只是mouseleave和mouseenter的组合（这些是特定于IE的事件，但jQuery会在不提供它们的浏览器上模拟它们）。但是mouseleave和mouseover不会冒泡;这是他们有用的部分原因。但是，相关（而不是IE特定的）mouseout和mouseenter事件会冒泡，所以看起来~~可能是~~是mouseleave /中的错误{{1}}仿真特定于委派处理。（修改：具体而言，bug #9069已经报告并正在积极开展工作。）

Answer 2

@glabus

使#info位置绝对

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

你可以用jquery.css动态设置top和left

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

希望它有所帮助。干杯

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

3 个答案: