mouseover和mouseenter的区别

mouseover和mouseout绑定某个'外层元素aaa'，如果这个元素有子元素，则不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件；而只有在鼠标指针从'外层元素aaa'外穿入被选元素时，才会触发 mouseenter 事件。

测试代码如下：

<section class="moude1 container bd1">

    <div class="moude1a bd2">鸿硕科技网站建设小程序开发</div>

    <ul class="bd3">

        <li>网站建设</li>

        <li>小程序开发</li>

        <li>在线教育系统</li>

    </ul>

</section>

<!-- 下面这串js当鼠标进入ul中或者进入'.moude1a'中时，均会触发'.moude1'绑定的事件 -->

<script>

    $(document).ready(function() {

        $('.moude1').mouseover(function() {

            $(this).find('ul').slideDown(300);

        });

        $('.moude1').mouseout(function() {

            $(this).find('ul').slideUp();

        });

    })

</script>

<!-- 下面这串js当鼠标进入ul中或者进入'.moude1a'中时，均不会触发'.moude1'绑定的事件；而只有鼠标离开'.moude1'这个外层大元素的时候才会触发'.moude1'绑定的事件。 -->

<script>

    /* $(document).ready(function() {

        $('.moude1').mouseenter(function() {

            $(this).find('ul').slideDown(300);

        });

        $('.moude1').mouseleave(function() {

            $(this).find('ul').slideUp();

        });

    }) */

</script>

大概的代码如上，可以区别出mouseover和mouseenter不同之处，今天时间仓促，写的不够详细，如有不妥，可以加群交流，656992002，也可以直接联系我交流，联系方式见页面底部。