嵌套元素的悬停功能

Question

我有<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);
});

Answer 1

mouseenter event和mouseleave 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);
});