Jquery 双圆按钮悬停

我制作了一个由两个圆圈组成的按钮，如下所示：

$（'.circle'）.mouseover（函数（）{
$（'.overlay'）.animate（{opacity:0.7，}，200）；
});	
$（'.circle'）.mouseout（函数（）{
$（'.overlay'）.animate（{opacity:0}，100）；
});
.overlay{
位置：绝对位置；
背景：黑色；
宽度：100%；
身高：100%；
不透明度：0；
}
.圆圈{
位置：绝对位置；
宽度：30px；
高度：30px；
边框：1px虚线#fc7945；
边界半径：50px；
光标：指针；
z指数：99；
}
.圈入{
宽度：20px；
高度：20px；
边缘顶部：2倍；
背景：无；
左边距：2倍；
边框：3px实心#fc7945；
边界半径：50px；
光标：指针；
}

任何当前正在运行的动画：

$('.circle')
  .mouseover(function() {
    $('.overlay').stop().animate({  //add stop() here
      opacity: 0.7,
    }, 200);
  })
  .mouseout(function() {
    $('.overlay').stop().animate({  //and here
      opacity: 0
    }, 100);
  });


$（“.circle”）
.mouseover（函数（）{
$（'.overlay'）.stop（）.animate({
不透明度：0.7，
}, 200);
})
.mouseout（函数（）{
$（'.overlay'）.stop（）.animate({
不透明度：0
}, 100);
});
.overlay{
位置：绝对位置；
背景：黑色；
宽度：100%；
身高：100%；
不透明度：0；
}
.圆圈{
位置：绝对位置；
宽度：30px；
高度：30px；
边框：1px虚线#fc7945；
边界半径：50px；
光标：指针；
z指数：99；
}
.圈入{
宽度：20px；
高度：20px；
边缘顶部：2倍；
背景：无；
左边距：2倍；
边框：3px实心#fc7945；
边界半径：50px；
光标：指针；
}
这不是因为圆圈之间的间距，而是从外圈移动到内圈会触发指针事件（mouseout，mousein），从而导致动画重新开始

通过向内圈添加一行CSS，可以完全禁用内圈上的事件，从而防止出现这种情况。代码的其余部分可以保持不变，并且几乎没有副作用的变化，因为动画不需要变通。不过，IE只支持这一点


$（'.circle'）.mouseover（函数（）{
$（'.overlay'）.animate（{opacity:0.7，}，200）；
});	
$（'.circle'）.mouseout（函数（）{
$（'.overlay'）.animate（{opacity:0}，100）；
});
.overlay{
位置：绝对位置；
背景：黑色；
宽度：100%；
身高：100%；
不透明度：0；
}
.圆圈{
位置：绝对位置；
宽度：30px；
高度：30px；
边框：1px虚线#fc7945；
边界半径：50px；
光标：指针；
z指数：99；
}
.圈入{
宽度：20px；
高度：20px；
边缘顶部：2倍；
背景：无；
左边距：2倍；
边框：3px实心#fc7945；
边界半径：50px；
光标：指针；
指针事件：无；
}


pointer-events: none;