我有以下代码在鼠标悬停时向下移动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>
答案 0 :(得分:3)
您需要使用mouseenter和mouseleave而不是mouseover和mouseout,这会在子元素上触发时冒泡到父级。
以下是docs的摘录。
当指针移动到子元素时,mouseover会触发, 而只有当指针移动到边界时,mouseenter才会触发 元件。
同样如j08691所建议的那样,您可能只想使用.hover,因为此方法会为mouseenter和mouseleave事件绑定处理程序。
答案 1 :(得分:1)
试试这个:
var baseMargin = 20;
$('.item').hover(function() {
$(this).stop().animate({marginTop: (baseMargin+20)+'px'}, 500);
},
function() {
$(this).stop().animate({marginTop: (baseMargin-20)+'px'}, 500);
});