理解mouseover,mouseout,mouseenter,mouseleave

mouseover定义和用法

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

 <div class="parent">父亲
            <div class="child">儿子<span></span></div>
</div>

<script type="text/javascript">
             $(function(){
                 var x=1;
                 $(".parent").mouseover(function(){
                     $(".parent span").text(++x);
                 });
                  $(".parent").mouseout(function(){
                     $(".parent span").text(++x);
                 });
             });
</script>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAACkCAIAAAB94KkVAAACaklEQVR4nO3XsXWjQBSG0em/lK3BPbiAdQXuQBEOfDZZxBgG0DP8950vQIjA5jLSqH18PpRW+/v5UFrtz9u70mqTyRvqiUM9cagnDvXEoZ441BOHeuIsq7ema7dfvS0cd1p5mc5qp/rcD/wF2qO+JPf0/I9Tfy9yGlbvO1H81Y2pd1Db7ODpu50zOr3htb5k9qPiwO5PB/cC9U1Tf0cS2qk+ja5dwJVRT2y/+vSPsL/F8/H+izpEfdpuxriy16z1/658eqDXtV99/ff60pXgX91O9TnYEmHb8lLnNqze2X/N35qv7PWPi45vQH3lfrv/WNT/58kNr3VdOOqJUU9sRH1qWls58BnqrbXOS9UDF6qvmXoh6seq97stOfVEcuqJ5NTn3vcnpz5Xryehfp76pql3om6tU6dOnXqm+lxu/UNAnfp9Kwc+Vn1pu079tup9zv4vse+T1C+mvh8shfxO6vW38kKVA1OnTp06derUqVOnTp26qIu6qIdWDkydOnXq1KlTp06dOnXqoi7qoh5aOTB16tSpU6dOnTp16tSpi7qoi3po5cDUqVOnTp06derUqVOnLuqiLuqhlQNTp06dOnXq1KlTp06duqiLuqiHVg5MnTp16tSpU6dOnTp16qIu6qIeWjkwderUqVOnTp06derUqYu6qIt6aOXA1KlTp06dOnXq1KlTpy7qoi7qoZUDU6dOnfom9fI/Wjujnhj1xKgnRj0x6olRT4x6YtQTo54Y9cSoJ0Y9MeqJUU+MemLUE6OeGPXEqCdGPTHqiVFPjHpi1BOjnhj1xKgnRj0x6omNqJv7DvXEoZ44X+z6uV+yNSyHAAAAAElFTkSuQmCC" alt="" />

当鼠标在父亲容器和父亲外容器之间切换时里面的值每次只会加1，当鼠标在父亲容器和儿子容器之间切换时，里面的值每次会加2，因为不论鼠标指针穿过被选元素或其子元素都会触发mouseover，mouseout同理。

mouseenter定义和用法

当鼠标指针穿过元素时，会发生 mouseenter 事件。

该事件大多数时候会与 mouseleave 事件一起使用。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

<script type="text/javascript">
             $(function(){
                 var x=1;
                 $(".parent").mouseenter(function(){
                     $(".parent span").text(++x);
                 });
                  $(".parent").mouseleave(function(){
                     $(".parent span").text(++x);
                 });
             });
</script>

只有当鼠标经过父亲容器的时候才会触发，经过儿子容器是没有反应的，mouseleave同样，只有离开父亲容器的时候才会促发。

但是有个问题，当用绝对定位让儿子容器偏离父亲元素的覆盖面积时，效果上mouseenter跟mouseover情况一样了：

<style type="text/css">
            .parent{
                position: relative;
                width:150px;
                height:150px;
                background: red;
            }
            .child{
                position: absolute;
                top:160px;
                left:160px;
                width:100px;
                height:100px;
                background: yellow;
            }
 </style>

<script type="text/javascript">
             $(function(){
                 var x=1;
                 $(".parent").mouseenter(function(){
                     $(".parent span").text(++x);
                 });
                  $(".parent").mouseleave(function(){
                     $(".parent span").text(++x);
                 });
             });
</script>

aaarticlea/png;base64,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" alt="" />

使用mouseenter，鼠标在儿子容器上面经过时也会触发mouseenter，原因是这时候鼠标进入儿子容器的时候实际上就是进入了父亲容器。