如何让DIV避免在小猫上跳跃？

Question

这个小片段的目标是（默认情况下）显示图像数据，然后通过“slideDown”onMouseOver将其删除。它主要工作，但是如果将鼠标悬停在文本上时显示信息，则div会像疯狂一样上下跳动。任何帮助，以补救这一点，表示赞赏！

演示： http://jsfiddle.net/voudini/SggsV/

Answer 1

使用onmouseenter和onmouseleave

试试这个

$('.hoverbox') 
    .mouseenter(function(){ 
     $(".hoverinfo", this).stop(true, true).slideUp(400); 
    }) 
    .mouseleave(function(e){ 

     $(".hoverinfo", this).stop(true, true).slideDown(400); 
    }); 

Updated Fiddle

检查其文档

Mouse Enter和 Mouse Leave

MouseEnter事件从鼠标悬停在不同它处理 事件冒泡的方式。如果在此示例中使用了鼠标悬停，那么当鼠标指针移动到Inner元素上时，处理程序将触发 。这通常是不受欢迎的行为。另一方面，mouseenter事件 只在鼠标输入绑定的元素 而不是后代时触发其处理程序。所以在这个例子中，当鼠标进入Outer元素时触发 处理程序，但不是内部元素的 。