Question

jquery父级添加事件后子级也触发该事件，请教如何解决。

代码如下
JQUERY代码：
$(function (){
$('#slider').children().on('mouseover', function (){
$('#slider').children().animate({opacity:0.6});
$(this).animate({opacity:1});
})
$('#slider').on('mouseout',function () {

$(this).children().animate({opacity:1})
})
})
HTML 代码：
<ul id="slider">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

当鼠标从slider 里面移除的时候我想让slider下所有的 li 变成opacity:1 ,当鼠标在 li 之间移动的时候我想让当前的 li 变成 opacity:0.6， 问题是现在从任何的 li 上移出鼠标时他都会触发父级slider的mouseout事件，也就是他会先把所有的 li 变成opacity:1 然后才将当前的变成opacity:0.6,请问如果解决此问题 非常感谢！！！

Answer 1

jQuery事件委托、冒泡。

$("#slider").on("mouseover",">li",function(){
$(this).animate({opacity:0.6});
});

这样改，试一下。。

追问

还是一样，没有变化，我想 鼠标移到任何 li 上的时候当前这个变成opacity:1 , 剩下的全都变成 opacity:0.6 然后从slider里也就是父级ul里移出来的时候 他的子级也就是所有的 li 全都回到 opacity:1

追答

$("#slider").on('mouseover', 'li', function() {
$(this).css("opacity",'1');
$(this).siblings('li').css("opacity",'0.4');
});
$("#slider").on('mouseleave',"li", function() {
$(this).css("opacity",'0.4');
});
$("#slider").on('mouseleave', function() {
$(this).children("li").css("opacity",'1');
});

Answer 2

这推荐答案也是瞎吊答 楼主明显是冒泡问题 原程序不用改 就加个阻止冒泡就行
$('#slider').children().on(mouseout,function(e){
e.stopPropagation();
}
)