Question

我有以下代码在鼠标悬停时向下移动DIV block 20px：

$('.outerDiv').mouseover(function()
{       
    $(this).animate({marginTop: "+=20px",},500);
});

$('.outerDiv').mouseout(function()
{       
    $(this).animate({marginTop: "-=20px",},500);
});

div里面包含另一个div。问题是，当鼠标位于内部div之上时，鼠标输出事件发生，div块向上移动20px。我想知道如果鼠标只在外部div之外，是否有办法只触发mouseout事件。

这是HTML结构：

<div class='outerDiv'>
    <div class='innerDiv'>
       bla bla bla
    </div>
</div>

Answer 1

您需要使用mouseenter和mouseleave而不是mouseover和mouseout，这会在子元素上触发时冒泡到父级。

以下是docs的摘录。

当指针移动到子元素时，
mouseover会触发，而只有当指针移动到边界时，mouseenter才会触发元件。

同样如j08691所建议的那样，您可能只想使用.hover，因为此方法会为mouseenter和mouseleave事件绑定处理程序。

Answer 2

试试这个：

var baseMargin = 20;

$('.item').hover(function() {
    $(this).stop().animate({marginTop: (baseMargin+20)+'px'}, 500);
},
function() {
    $(this).stop().animate({marginTop: (baseMargin-20)+'px'}, 500);                 
});

示例：http://jsfiddle.net/bKc47/1/

鼠标悬停和鼠标移动时jQuery动画

2 个答案: