jQuery停止将父元素悬停在子元素上的动画 [英] jQuery stop child elements animate on hover of parent

问题描述

我正在为#jam列表中的div设置动画.

I'm trying to animate the div within the #jam list.

li有一个背景图像，将其悬停时会显示box类.

The li has a background image that when hovered displays the box class.

我的问题是，当我将box类div悬停时，它们也会触发悬停.

The problem I have is that when I hover the box class div's they trigger the hover aswell.

如何仅使li背景图像悬停而不使其中的元素悬停?

How can I make only the li background image hover not the elements inside it?

/*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>

推荐答案

尝试添加:

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

或执行:

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

这篇关于jQuery停止将父元素悬停在子元素上的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！