事件泡泡问题（我想..！）

我有一个大的DIV #bigdiv。当我将它悬停时，我想要一个小的信息DIV #info出现在大div中。问题：当我将鼠标放在#info上时（一旦我通过悬停#bigdiv使它出现），它使它（#info）无限地出现和消失。这里是我的代码：事件泡泡问题（我想..！）

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

更新

我试图mashappslabs的解决方案（的mouseenter /鼠标离开），我试图T.J. Crowder的一个（不使用live（））：结果相同。

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

来源

2011-05-09 glabus

你可以发布你的HTML和CSS代码。你的代码适合我。 http://jsfiddle.net/ynhat/XZN5s/ – YNhat 2011-05-09 05:31:57

@YNhat：是的，这会有所帮助。 :-)我可以复制类似的行为与我的答案链接的例子，但只有@glabus可以告诉我们这是否也是他/她看到的行为。 – 2011-05-09 05:44:43

@dandan @glabus：那么你的代码的其他部分并没有做正确的事情，我为你发布的这个例子工程http：// jsfiddle。net/2aCJ2 /，查看CSS，HTML和jQuery的代码，如果需要更多帮助，可以在这里发布更多的代码。干杯。 – forthehackofit 2011-05-09 15:57:12

@glabus

使绝对#info位置

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

可以动态地设置顶部和左侧与jquery.css也

来源

2011-05-09 05:29:02 kobe

他不应该那样做。 – 2011-05-09 05:35:41

@ T.j是的我同意， – kobe 2011-05-09 05:39:41

...在我的例子中，我没有。 :-) – 2011-05-09 05:45:11

它看起来像在live版本的hover一个小错误。对比this example，使用live，与this one使用事件处理程序实际上bigdiv（计数器在那里，所以我们知道什么时候情况正在改变）。问题在于当您将鼠标移动到info div（单词“info”）并将其移出（仍在bigdiv内）时。所以答案可能不是使用live，虽然我猜你有一个使用live的原因，所以这可能不方便。

您可能知道hover基本上只是mouseenter和mouseleave（它们是特定于IE的事件，但jQuery在不提供它们的浏览器上模拟它们）的组合。但是mouseenter和mouseleave不要泡;这是他们为什么有用的一部分。但是，相关的（而不是IE特定的）mouseover和mouseout事件泡泡，因此它看起来像是~~可能是~~是特定于委托处理的mouseenter/mouseleave仿真中的一个错误。（编辑：具体来说，bug #9069，该项目已上报，正在积极致力于对）

来源

2011-05-09 05:38:09

你使用什么浏览器？这两个例子对我来说都很完美（FF 4.0.1，Linux） – nico 2011-05-09 05:41:01

@nico：一定要将鼠标移动到单词信息上并再次输出（但仍在框内）。我已经尝试过Linux上的Chrome 10，Firefox 3.6，Opera 11以及Windows上的IE6和IE7。 – 2011-05-09 05:43:22

@ T.J。 Crowder：好的，现在我看到了问题。我误解了原来的问题。 – nico 2011-05-09 05:54:53

使用了mouseenter和鼠标离开，在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(); 
});

希望它有帮助。干杯

来源

2011-05-09 07:27:10 forthehackofit

事件泡泡问题（我想..！）

回答

相关问题