博客

mouseover事件和mouseenter 事件的区别


mouseover事件会触发多次，每遇到一个子元素就会触发一次。

mouseenter 事件只会触发一次。鼠标经过的时候只会触发一次

mouseenter 和 mouseleave 一起使用

mouseover 和 mouseout 一起使用

实例下拉菜单的实现：



方法一：（常规）



结构：

<div class="box">
    <ul>
        <li><a href="#">一级菜单1</a>
            <ul class="erji">
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单1</a>
            <ul class="erji">
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单1</a>
            <ul class="erji">
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>

JS：

$(document).ready(function(){
    $('.box li').mouseenter(function(){
        $(this).children('ul').show();
});
   $(".box li").mouseleave(function(){
     $(this).children('ul').hide();
});
})

效果：





注意：


绑定事件为什么不是给 li的 a 标签绑定？

答：因为a与下拉菜单是ul 是兄弟关系，mouseenter事件加到a元素上，当离开a的时候，ul会隐藏，只有将触发事件加到父元素，滑到ul上不会隐藏，因为mouseenter事件在子元素里同样有效果。

方法二：


jquery 的hover()方法有两个函数，第一个是移上去的时候触发的事件，第二个函数是移开是触发的函数，刚好可以实现下拉菜单。

$('.box li').hover(function(){
     $(this).children('ul').show();
  },function(){
    $(this).children('ul').hide();
});

方法三：

$('.box li').hover(function(){
    $(this).children('ul').slideToggle();
});