jquery - 如何防止 DIV 在 MouseOver 上跳转？

Question

这个小片段的目标是(默认情况下)显示图像数据，然后通过鼠标悬停时的“slideDown”将其删除。它大部分工作正常，但是当您将鼠标悬停在文本上显示信息时，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

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the Outer element, but not the Inner element.