其他分享
首页 > 其他分享> > jQuery中mouseenter&mouserleave替代mouseover&mouseout

jQuery中mouseenter&mouserleave替代mouseover&mouseout

作者：互联网

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 10:18-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery下拉菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
            //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

            //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
            // 获取一次菜单li 的方式
            var i = 0;
            // $('.wrap > ul > li').mouseover(function () {
            $('.wrap > ul > li').mouseenter(function () {
                i++;
                console.log(i);
                $(this).children('ul').show();
            });

            //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
            // $('.wrap > ul > li').mouseout(function () {
            $('.wrap > ul > li').mouseleave(function () {
                $(this).children('ul').hide();
            });

            /**
             * mouseover: 事件在 鼠标移动到 选取的元素 及其 子元素上时, 触发
             * mouseenter: 事件只在 鼠标移动到 选取的元素上时 触发
             */

            /**
             * 以后, 如果有 鼠标移入事件, 使用 mouseenter, 而不是 mouseover
             * 鼠标离开事件石永红 mouserleave, 而不是 mouserout
             */
        });
    </script>
</html>

在这里插入图片描述

标签：jQuery,mouserleave,菜单,鼠标,二级,li,ul,mouseout,wrap
来源： https://www.cnblogs.com/beyondx/p/16539552.html