我希望当鼠标移动到id1上的时候，id2显示，当鼠标离开id1的时候，id2显示。问题如下：
1.当鼠标从id1上移动到id2上的时候，id由有显示变为不显示，然后变为显示
2.当鼠标从id2上移动到id1上的时候， id2有显示变为不显示，然后变为显示
我希望的是当鼠标在id1或者id2上移动的时候，id2一直显示，不发生变化。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <div> <div> </div> </div> <script type="text/javascript"> $("#id1").mouseover(function(){ $(this).children().fadeIn(1000); }).mouseout(function(){ $(this).children().fadeOut(1000); }); </script>
问题解决办法
最开始的问题分析，当鼠标从id1上移动到id2上的时候，由于鼠标由id2离开进入id1，针对id1触发了一个mouseout事件，于是id2有显示变为不显示，接着在鼠标移动到id2上，在id2上触发了一个mouseover事件，由于冒泡机制，id2上的mouseover冒泡到id1之前，触发了id1上的mouseover事件，然后id2由不显示变为显示。同理，当鼠标从id2上移动到id1上的时候，针对id2，触发了一个mouseout事件，还是因为冒泡机制，mouseout事件传到id1上，id2由显示变为不显示，接着鼠标移动到id1之前，触发了一个mouseover事件，然后id2有不显示变为显示。
看来，上面的问题归根要解决的是，当鼠标由id1上移动到id2上的时候，阻止id1的mouseout事件；当鼠标从id2上移动到id1上的时候，阻止id2的mouseout事件冒泡到id1之上。那么仅仅通过阻止冒泡是解决不了问题。
为了解决这样的问题，jQuery提供了mouseenter和mouseleave方法。于是将JS代码改为如下，很好解决了问题。
$("#id1").mouseenter(function(){ $(this).children().fadeIn(1000); }).mouseleave(function(){ $(this).children().fadeOut(1000); });
很多地方都有介绍mouseenter、mouseleave与mouseover、mouseout，于是复制粘贴了一个。
/*********************************************************/
1.mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
2.mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
/*********************************************************/
现象确实是这个现象，但是过程说的有点模糊，我的理解如下：
当鼠标指针移动到被选元素，会触发 mouseover 事件，这个大家都知道，当鼠标指针由被选元素移动到其子元素，先是触发被选元素的mouseout事件，然后子元素的mouseover事件冒泡到被选元素，此时相当于被选元素先执行了一个mouseout事件，然后执行了一个mouseover事件。
为了验证将代码改为如下
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <div> <div> </div> </div> <script type="text/javascript"> $("#id1").mouseover(function(){ //$(this).children().fadeIn(1000); console.log('a'); }).mouseout(function(){ //$(this).children().fadeOut(1000); console.log('b'); }); </script>
鼠标从页面移动到id1，然后由id1移动到id2上，控制台输出如下图
可以看出id1先后调用了mouseover、mouseout、mouseover事件，正好和上面分析的相同。
mouseenter与mouseleave实现分析
原理分析
从上面分析，我们可以看出，要实现mouseenter与mouseleave的效果，就是当鼠标从被选元素移动到其子元素上的时候，被选元素不执行mouseout事件，也不执行子类冒泡过来的mouseover事件，当鼠标从被选元素子元素移动到被选元素上的时候，被选元素不执行mouseover事件，也不执行子类冒泡过来的mouseout事件。
要实现上面的效果，我们需要event对象的一个属性relatedTarget，这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时，relatedTarget属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性，不过它有代替的属性，分别是 fromElement和toElement。除此，我们还需要contains方法，来判断一个对象是否包含在另外一个对象中。
这样当鼠标移动，需要判断以下两条即可