js css鼠标悬停显示下拉菜单_jsp鼠标悬停在某个页面上的菜单栏向下-CSDN博客

本文链接：https://blog.csdn.net/masuwen/article/details/79724331

本文介绍了一个用于学生个人信息维护的下拉菜单设计实现方案，包括HTML结构、JavaScript交互逻辑及CSS样式设置，使得用户可以方便地进行个人信息的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="swss_xx">
            <ul class="clearfix">
                <li id="xxwh"><a href="#" οnclick="javascript:studentInfoUpdate()">个人信息维护</a>
                    <div id="show_xxwh" style="display: none">
                        <ul>
                            <li><a href="#" οnclick="javascript:studentInfoUpdate()">学生信息修改</a></li>
                            <%--<li><a href="#">修改密码</a></li>--%>
                            <%--<li><a href="#">修改密码</a></li>--%>
                        </ul>
                    </div>
                </li>
                <%--<li><a href="javascript:pwdCon();">修改密码</a></li>--%>
                <li><a href="<%=ctx %>/logout">退出</a></li>
            </ul>
            <p><span id="uname">登录用户：</span>            
                <span id="cid">所在班级： </span>
            </p>
</div>

js文件

//个人信息维护下拉菜单样式
$(function () {
    //个人信息维护下拉菜单
    $("#show_xxwh").hide();
     $("#xxwh").hover(function () {
        $("#show_xxwh").show();
  }, function () {
        $("#show_xxwh").hide();
    })
   // 鼠标移动到show_xxwh 的div上的时候show_xxwh div不会被隐藏
     $("#show_xxwh").hover(function () {
        $("#show_xxwh").show();
     }, function () {
         $("#show_xxwh").hide();
     })
   
});

css 文件

.swss_xx ul li#xxwh{width:100px;position:relative;}
#show_xxwh{width:100px;height:auto;background:#fff;border:1px #d0d0d0 solid;border-radius:10px;position:absolute;top:18px;left:0px;}
#show_xxwh ul{float:none;margin:5px 0px;}
#show_xxwh ul li{width:100px;height:24px;margin-left:0px;float:none;}
#show_xxwh ul li a{font:12px/24px "Microsoft Yahei";color:#666666;text-align:center;border:none;border-radius:0px;}
#show_xxwh ul li a:hover{background:#ccc;}