如何防止DIV跳过onMouseOver？

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事件，   另一方面，只有当鼠标进入时才触发其处理程序   它被绑定的元素，而不是后代。所以在这个例子中，   当鼠标进入外部元素时触发处理程序，但不是   内在元素。