jQuery中mouseenter&mouserleave替代mouseover&mouseout

2022-08-01 11:32:29 阅读：165 来源： 互联网

标签：jQuery mouserleave 菜单鼠标二级 li ul mouseout wrap

<!--@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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery中mouseenter&mouserleave替代mouseover&mouseout