jQuery中mouseenter&mouserleave替代mouseover&mouseout




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);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

在这里插入图片描述

相关阅读:
paddleocr有效关闭log日志打印输出
 07-网络篇-抓包分析TCP
【mysql】1044 - Access denied for user ‘root‘@‘%‘ to database ‘test_job‘
Qt 文件和文件夹操作
 51单片机驱动TCS3200颜色识别传感器
 MySQL系列——集群复制方式及原理
 Flask像Jenkins一样构建自动化测试任务
 SSM+中小型企业绩效管理系统毕业设计-附源码081536
3D造型渲染软件DAZ Studio mac中文版介绍
 混合现实（MR）开发框架
原文地址：https://blog.csdn.net/beyondx/article/details/126097677