qq_39904149 2021-11-02 23:19 采纳率: 100%
浏览 30
已结题

设置了鼠标经过才会显示里面的ul但鼠标还没滑进ul就消失了


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .box {
            width: 160px;
            height: 30px;
            border: 1px solid black;
            margin: auto;
        }

        .box li {
            float: left;
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            list-style: none;
            position: relative;
        }

        .nav_1 .box1 {
            display: none;
            position: absolute;


        }

        .nav_1 .box1 li {
            width: 40px;
            height: 30px;
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

        .nav_1 a {
            display: inline-block;
            width: 40px;
            height: 30px;
        }
    </style>
    <script src="../jQuery.mini.js"></script>
</head>

<body>
    <div class="box">
        <ul>
            <li class="nav_1">
                <p><a href=" ">我的</a ></p >
                <ul class="box1">
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                </ul>
            </li>
            <li class="nav_1">
                <a href="javascript:;">我的</a >
                <ul class="box1">
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                </ul>
            </li>
            <li class="nav_1">
                <a href="javascript:;">我的</a >
                <ul class="box1">
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                </ul>
            </li>
            <li class="nav_1">
                <a href="javascript:;">我的</a >
                <ul class="box1">
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        $(function () {

            $('.nav_1').mouseenter(function () {
                $(this).children('ul').show(); //show显示元素

            })
            $('.nav_1').mouseout(function () {
                $(this).children('ul').hide(); //show显示元素
            })

        })
    </script>
</body>

</html>
  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-11-03 09:10
    关注

    你用错了吧 鼠标经过 和当鼠标指针穿过元素 不一样的
    mouseover

    jQuery 事件 - mouseenter() 方法 https://www.w3school.com.cn/jquery/event_mouseenter.asp

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 11月11日
  • 已采纳回答 11月3日
  • 创建了问题 11月2日

悬赏问题

  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题
  • ¥30 酬劳2w元求合作写文章
  • ¥15 在现有系统基础上增加功能
  • ¥15 远程桌面文档内容复制粘贴，格式会变化
  • ¥15 这种微信登录授权 谁可以做啊
  • ¥15 请问我该如何添加自己的数据去运行蚁群算法代码
  • ¥20 用HslCommunication 连接欧姆龙 plc有时会连接失败。报异常为“未知错误”