加入收藏 | 设为首页 | 会员中心 | 我要投稿 52站长网 (https://www.52zhanzhang.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

用JS如何做鼠标移过显示二级下拉菜单?

发布时间:2022-01-12 05:51:59 所属栏目:语言 来源:互联网
导读:用JS怎样做鼠标移过显示二级下拉菜单?也就是当当鼠标经过一级菜单时,显示二级菜单,鼠标离开时隐藏。这个效果在很多网站设计中都会看到,小编觉得比较实用,因此分享给大家做个参考,那么接下来我们就看看怎样做吧。 鼠标放到微博、博客或邮箱上面时,会出
   用JS怎样做鼠标移过显示二级下拉菜单?也就是当当鼠标经过一级菜单时,显示二级菜单,鼠标离开时隐藏。这个效果在很多网站设计中都会看到,小编觉得比较实用,因此分享给大家做个参考,那么接下来我们就看看怎样做吧。
 
 
 
  鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。
 
  设计简单的下拉菜单栏
 
 
 
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>下拉菜单</title>
   <style>
    *{
     margin: 0;
     padding: 0;
     
    }
    a{
     text-decoration: none;
     
    }
    div {
     width: 1200px;
     height: 30px;
     margin: 0px auto;
     background-color: blanchedalmond;
    }
    li {
     list-style: none;
    }
    div li {
     position: relative;
     float: right;
     text-align: center;
     border: 1px solid black;
     line-height: 30px;
     width: 80px;
     height: 30px;
    }
    div ul {
     position: absolute;
     top:30px;
     display: none;
    }
    div ul li{
     
     float: left;
     width: 120px;
     height: 30px;
     background-color: pink;
    }
   </style>
  </head>
  <body>
   <div>
    <li><a href="#" >邮箱</a>
     <ul>
      <li><a href="#" >免费邮箱</a></li>
      <li><a href="#" >VIP邮箱</a></li>
      <li><a href="#" >企业邮箱</a></li>
      <li><a href="#" >新浪邮箱客户端</a></li>
     </ul>
    </li>
    <li><a href="#" >博客</a>
     <ul>
      <li><a href="#" >博客评论</a></li>
      <li><a href="#" >来读提醒</a></li>
     </ul>
    </li>
    <li><a href="#" >微博</a>
     <ul>
      <li><a href="#" >私信</a></li>
      <li><a href="#" >评论</a></li>
      <li><a href="#" >@我</a></li>
     </ul>
    </li>
    <li ><a href="#" >登录</a></li>
 
   </div>
   <script>
    var div = document.querySelector('div');
    var lis = div.children;
    for (var i=0;i<lis.length;i++){
     //鼠标经过,出现下拉菜单
     lis[i].onmouseover=function(){
      this.children[1].style.display='block';
     }
     //鼠标离开,隐藏下拉菜单
     lis[i].onmouseout=function(){
      this.children[1].style.display='none';
     }
    }
 
   </script>
  </body>
  </html>

(编辑:52站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读