嵌套元素的悬停功能

时间:2014-11-26 16:09:37

标签: jquery html hover

我有<div class="lewy">和其他许多div。当我悬停div“lewy”我的jQuery函数工作,但当我移动指针到任何嵌套div时,它不会。我怎样才能让它发挥作用?

我想对所有内部div实现此行为。

$(".lewy").hover(function() { 
    $(".lewy").animate({width: 600}, 100);
});

$(".lewy").mouseout(function() { 
    $(".lewy").animate({width: 300}, 50);
});

1 个答案:

答案 0 :(得分:4)

mouseenter eventmouseleave event就是针对这种情况而构建的。

$(".lewy").mouseenter(function() { 
  $(".lewy").animate({width: 600}, 100);
});
$(".lewy").mouseleave(function() { 
  $(".lewy").animate({width: 300}, 50);
});

附注:您可以将方法链接到应用于相同元素的链接。如果它适用于多个元素,那么您可能希望在处理程序中使用$(this)而不是$('.lewy')(否则只是因为它更快,更简单且更易于维护)。您通常希望在启动之前停止任何可能的先前动画,以防止它们排队:

$(".lewy").mouseenter(function() { 
  $(this).stop().animate({width: 600}, 100);
}).mouseleave(function() { 
  $(this).stop().animate({width: 300}, 50);
});