如何防止 DIV 在鼠标悬停时跳转？

Question

这个小 sn-p 的目标是（默认情况下）显示图像数据，然后通过“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 事件在处理方式上与 mouseover 不同 事件冒泡。如果在本例中使用了 mouseover，那么当 鼠标指针移到内部元素上，处理程序将是 触发。这通常是不受欢迎的行为。 mouseenter 事件， 另一方面，只有当鼠标进入 它绑定到的元素，而不是后代。所以在这个例子中， 当鼠标进入外部元素时触发处理程序，但不 内部元素。