jQuery在父项悬停时停止子元素动画

Question

我正试图在#jam列表中设置div的动画。

li有一个背景图片，当悬停时会显示框类。

我遇到的问题是，当我悬停盒子类div时，它们会触发悬停。

如何才能使li背景图像悬停而不是其中的元素？

/*Services Pyrimid*/
$('ul#jam li').hover(function() {
    $(this).find('div:first').animate({opacity: 1.0, left:190}, 500);
},function(){
    $(this).find('div:first').animate({opacity: 0, left:-400}, 500);        
});


<ul id="jam">
 <li id="spot-a">
  <div class="box">
   text
  </div>
 </li>
 <li id="spot-b">
  <div class="box">
   text
  </div>
 </li>
</ul>

Answer 1

尝试添加：

$(".box").on('mouseenter mouseleave', function(e) {
    e.stopPropagation();
});

或做：

$('ul#jam li').not('.box').hover(function() {...