jQuery实例_.mouseenter( function() { $(this)-CSDN博客

本文链接：https://blog.csdn.net/JBY2020/article/details/110407971

mouseover、mouseout：在鼠标移入或移出选定元素和子元素上触发事件

mouseenter、mouseleave：在鼠标移入或移出选定元素上时触发事件。

使用鼠标悬停事件时，hover(fun1,fun2)中传入的参数为函数，fun1为鼠标移入时的执行函数，fun2为鼠标移出时执行的函数。

案例资源下载：

https://www.jq22.com/

https://www.html5tricks.com/

https://www.17sucai.com/

案例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
    <script src="../JQ/JQuery.js" type="text/javascript"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #box1 {
            width:330px;
            height:30px;
            margin:100px auto;
            background-color:#235EA4;
            padding-left:10px;
        }
        #box1 li ul{
            width: 80px;
            height: 15px;
            color: red;
            display: none;
            text-decoration: none;
        }
        #box1>ul>li{
            width:100px;
            height:30px;
            background-color:cyan;
            line-height:30px;
            text-align:center;
            float:left;
            margin-right:10px;
            display:inline;
            position:relative;
            cursor:pointer;
        }
        .a{
            text-decoration: none;
            color: black;
            font-size: 18px;
        }
        li ul>li{
            left:0;
            top:30px;
            font-size: 15px;
        }
        a{
            text-decoration: none;
        }
        .clo{
            background-color: deepskyblue;
            font-size: 16px;
            color: black;
        }
    </style>
</head>
<body>
<div id="box1">
    <ul>
        <li>
            <a class="a" href="javascript:void(0)">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0)">二级菜单11</a></li>
                <li><a href="javascript:void(0)">二级菜单12</a></li>
                <li><a href="javascript:void(0)">二级菜单13</a></li>
            </ul>
        </li>
        <li>
            <a class="a" href="javascript:void(0)">一级菜单2</a>
            <ul>
                <li><a href="javascript:void(0)">二级菜单21</a></li>
                <li><a href="javascript:void(0)">二级菜单22</a></li>
                <li><a href="javascript:void(0)">二级菜单23</a></li>
            </ul>
        </li>
        <li>
            <a class="a" href="javascript:void(0)">一级菜单3</a>
            <ul>
                <li><a href="javascript:void(0)">二级菜单31</a></li>
                <li><a href="javascript:void(0)">二级菜单32</a></li>
                <li><a href="javascript:void(0)">二级菜单33</a></li>
            </ul>
        </li>
    </ul>
</div>
    <script type="text/javascript">
        // 方法1、使用hover鼠标悬停事件hover
        $("#box1>ul>li").hover(function () {
            $(this).children("ul").show();
            $("li li").addClass("clo");
            },function () {
            $(this).children("ul").hide();
            $("li li").removeClass("clo");
            }
        );

        // 方法2、使用鼠标移入移出事件
        // $("#box1>ul>li").mouseenter(function () {
        //     $(this).children("ul").show();
        //     });
        // $("#box1>ul>li").mouseleave(function () {
        //     $(this).children("ul").hide();
        //     });
    </script>
</body>
</html>

案例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <script src="../JQ/JQuery.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        div#box1{
            width: 300px;
            height: 20px;
            margin:  20px auto;
            border-radius: 8px;
            text-align: center;
        }
        div .ul{
            float : left;
            margin-left:2px;
            padding: 0;
            width: 70px;
            height: 60px;
            font-size: 18px;
        }
        img{
            width: 200px;
            height: 150px;
        }
        ul>li{
            display: none;  /*  设置元素默认隐藏  */
        }
        .sy{
            font-size: 20px;
            border-width: 4px;
            border-top: 2px solid chocolate;
        }
    </style>
</head>
<body>
    <div id="box1">
        <li>
            <ul class="ul">书法
                <li><a href="http://www.shufaai.com/"><img src="../img/shufa.jpg"></a></li>
            </ul>
        </li>
        <li>
            <ul class="ul">动物
                <li><a  href="https://www.jq22.com/"><img src="../img/dongwu.jpg"></a></li>
            </ul>
        </li>
        <li>
            <ul class="ul">风景
                <li><a  href="https://blog.csdn.net/JBY2020"><img src="../img/fenjing.jpg"></a></li>
            </ul>
        </li>
    </div>
    <script>
        $("#box1 ul").hover(function () {
            $(this).children("li").show();
            $(this).addClass("sy");
        },function(){
            $(this).children("li").hide();
            $(this).removeClass("sy");
        })
    </script>
</body>
</html>

块级标签：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽，典型的块级标签有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>
行内标签：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高，典型的行内标签有：<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<br>
行内块标签：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示，典型的行内标签有：<img>，<input>

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;