鼠标移开按钮时怎么不让二级菜单马上消失？

$("#about-btn").on("mouseenter", function() {
                $('#about-us').show();
            })
$("#about-btn").on("mouseleave", function() {
                $('#about-us').hide();
            });

想让鼠标在移开按钮后，移到菜单上时仍然能显示，怎么搞嘛，谢谢

javascript jquery

阅读 9.5k

8 个回答

得票最新

jayzou

2.8k219

发布于
2016-07-07

✓ 已被采纳

那你在菜单上面也加上和按钮一样的移入移出事件不就得了

$("#about-btn").on("mouseenter", function() {
                $('#about-us').show();
            })
$("#about-btn").on("mouseleave", function() {
                $('#about-us').hide();
            });
$("#mune").on("mouseenter", function() {
                $('#about-us').show();
            })
$("#mune").on("mouseleave", function() {
                $('#about-us').hide();
            });

不知名的a君

1216

发布于
2016-07-07

这是我之前写的一个代码希望对你有所帮助，记得自己引入jq原始文件比如： <script src="js/jquery-1.11.1.min.js"></script>，之前的回答在这里：https://segmentfault.com/q/1010000005890523/a-1020000005897412

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background: #f88;
        }
        #box {
            height: 210px;
            width: 200px;
            padding-right: 400px;
            margin: 0 auto;
        }
        
        #gps_left {
            position: absolute;
            float: left;
            width: 200px;
            height: 210px;
            background: #f00;
        }
        
        #gps_left li {
            width: 200px;
            height: 30px;
            font: 12px/30px '微软雅黑';
        }
        
        #gps_right {
            position: relative;
            left: 200px;
            top: 0;
            float: left;
            width: 400px;
            height: 210px;
            overflow: hidden;
            display: none;
        }
        
        #gps_right li {
            width: 400px;
            height: 210px;
            font: 12px/210px '微软雅黑';
            display: none;
            background: #f0f;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul id="gps_left">
            <li>111111</li>
            <li>22222</li>
            <li>3333</li>
            <li>44444</li>
            <li>555</li>
            <li>666</li>
            <li>7777</li>
        </ul>
        <ul id="gps_right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>
</body>
<script>
    $("#box li").hover(function () {
        var $indes = ($(this).index()) //获取下标
        $('#gps_right').css('display', 'block');
        $('#gps_right li').css('display', 'none').eq($indes).css('display', 'block');
    }, function () {
        $('#gps_right').css('display', 'none');
        $('#gps_right li').css('display', 'none');
    })
</script>

</html>

阿涛思密达

1094

发布于
2016-07-07

<div class="wrapper">
    <button>一级菜单</button>
    <div>我是二级菜单</div>
</div>

一般是让wrapper的高度比button高一点，hover div显示二级菜单，然后二级菜单要写在wrapper里面，这样就不会像你说的那样离开按钮二级菜单会消失

查看全部 8 个回答

推荐问题

鼠标移开按钮时怎么不让二级菜单马上消失？

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

求一个能输入需求就可以写出代码的网站，支持一键部署？