沉浸在代码无法自拔
2018-11-01 02:11
采纳率: 100%
浏览 4.5k

用js实现鼠标悬停出现二级菜单之后的问题

怎么用js设置啊 我想鼠标悬停出现二级菜单,然后去点击二级菜单里面的项,但是不知道怎么去设置这个操作,就是想鼠标离开二级菜单之后菜单才消失,

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 简简遇单单 2018-11-01 03:00
    已采纳

    jquery给一级和二级菜单绑定hover事件,控制关键字,用来控制一级和二级菜单的状态。
    同时通过控制关键字的值,通过判断,动态给一级菜单和二级菜单添加class
    从而实现动态控制二级菜单的显示与隐藏

    已采纳该答案
    1 打赏 评论
  • qq_42906618 2018-11-01 06:18

    图片说明

    1 打赏 评论
  • 天际的海浪 2018-11-01 07:49

    鼠标悬停出现二级菜单只用css就可以实现

    <!doctype html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />
        <meta charset="UTF-8" />
    <style type="text/css">
    #menu,#menu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #menu>li:hover {
        background-color: #9cf;
    }
    #menu>li {
        position: relative;
        width: 100px;
        height: 20px;
        float: left;
        background-color: #9ff;
    }
    #menu>li>ul {
        position: absolute;
        min-width: 100%;
        top: 100%;
        background-color: #cff;
        display: none;
    }
    #menu>li:hover>ul {
        display: block;
    }
    #menu>li li:hover {
        background-color: #99f;
    }
    </style>
    </head>
    <body>
    <ul id="menu">
        <li>菜单1
            <ul>
                <li>子菜单1-1</li>
                <li>子菜单1-2</li>
                <li>子菜单1-3</li>
                <li>子菜单1-3</li>
            </ul>
        </li>
        <li>菜单2
            <ul>
                <li>子菜单2-1</li>
                <li>子菜单2-2</li>
                <li>子菜单2-3</li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    
    
    1 打赏 评论
  • 小小笔记本 2018-11-05 07:12

    其实说白了就是CSS伪类hover+active去触发二级菜单,在二级菜单中使用js的onclick事件去触发你所想要的效果

    1 打赏 评论
  • qianqian_blog 2018-11-21 01:52
    1 打赏 评论

相关推荐 更多相似问题