jQuery停止在父級的懸停上設置動畫效果的子元素

Question

我試圖在#jam列表中設置動畫效果。

li有一個背景圖片，當histed顯示box類時。

我遇到的問題是，當我將鼠標懸停在框類div上時，它們觸發懸停。

我怎樣才能讓只有裏面的背景圖像懸停不是裏面的元素？

/*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() {...