jquery - 如何防止 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);
    });

更新小提琴

检查其文档

鼠标进入和 鼠标离开

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