-
讨论的问题是：当鼠标移动到黑盒，橙盒执行淡出动画，但当鼠标从黑盒的粉色盒子，橙色的框架了，然后动画淡出动画，当鼠标从粉红色的盒子的黑盒子，消失在橙盒动画再次执行。这不是我想要的。
初始代码：
鼠标悬停mouseout
母{。
宽度：200px；
身高：200px；
背景：黑色；
}
孩子{。
宽度：100px；
身高：100px；
背景：粉红色；
}
A1 {。
宽度：40px；
身高：40px；
背景：橙色；
显示：无；
}
$（'。父母），（'mouseover功能（e）{ {）
$（A1）显示（1000）；
}）；
$（'。父母），（'mouseout功能（e）{ {）
$（A1）。Css（显示器，不关）；
}）；
首先，我们解释了这些问题产生的原因。
当鼠标移动时从黑盒的粉色盒子，黑盒子的mouseout触发，和黑盒子的mouseover事件触发立即由于事件的冒泡，所以事实上，橙色的框架首先消失，然后立即消失的动画。这是我们看到的过程。
当鼠标从粉红色的框移到黑匣子，黑匣子mouseout和触发（因为老鼠通过选定的元素或子元素，所有的事件，当鼠标悬停mouseover）被触发，它又出现了在执行过程中褪色。
方法1：使用MouseLeave / mouseout代替鼠标悬停/ mouseout { }最好的方法
首先看mouseoutmouseover和mouseleavemouseenter之间的差异
鼠标悬停和MouseEnter
鼠标指针是否经过选择的元素或子元素，它触发mouseover事件。
的MouseEnter事件触发仅当鼠标指针进入所选元素之外的元素（的元素）。
mouseout和MouseLeave
无论是鼠标指针离开选定的元素或子元素，它会触发mouseout事件。
的MouseLeave事件触发鼠标指针经过选择的元素只有当（的元素）的元素。
你可以看到两个区别的一个简单例子。
因此，改进后的代码可以
鼠标悬停mouseout
母{。
宽度：200px；
身高：200px；
背景：黑色；
}
孩子{。
宽度：100px；
身高：100px；
背景：粉红色；
}
A1 {。
宽度：40px；
身高：40px；
背景：橙色；
显示：无；
}
$（'。父母），（'mouseenter功能（e）{ {）
$（A1）显示（1000）；
}）；
$（'。父母），（'mouseleave功能（e）{ {）
$（A1）。Css（显示器，不关）；
}）；
方法：用e.stoppropagation（）来防止事件的进一步传播
的e.stoppropagation（）终止事件进一步传播在捕获目标处理，或泡在传播过程中的相位。调用此方法后，处理该事件的节点上处理程序将被调用，而事件不再分配给其他节点。
鼠标悬停mouseout
母{。
宽度：200px；
身高：200px；
背景：黑色；
}
孩子{。
宽度：100px；
身高：100px；
背景：粉红色；
}
A1 {。
宽度：40px；
身高：40px；
背景：橙色；
显示：无；
}
$（'。父母），（'mouseover功能（e）{ {）
$（A1）显示（1000）；
}）；
$（'。父母），（'mouseout功能（e）{ {）
$（A1）。Css（显示器，不关）；
}）；
$（'。孩子），（'mouseover功能（e）{ {）
e.stoppropagation（）；
$（A1）。Css（显示器、阻止）；
这是为了确保动画/身体的结束状态不变。
}）；
$（'。孩子），（'mouseout功能（e）{ {）
e.stoppropagation（）；
从粉红方块移除，以防止其他事件再次触发黑盒。
}）
拓展思维：
1。如果有太多的子元素来做的，做的都e.stoppropagation（绑定）
使用jQuery选择器。儿童（），如$（'。父母），孩子（），得到匹配的元素集合中每个元素的子元素。
以上是本文的全部内容，希望大家能喜欢。