网络编程
位置：首页>> 网络编程>> JavaScript>> JavaScript实现鼠标经过显示下拉框

JavaScript实现鼠标经过显示下拉框

作者：KathyLJQ　　发布时间：2024-04-28 09:52:36　

标签：js,鼠标,下拉框

本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码，供大家参考，具体内容如下

JavaScript实现鼠标经过显示下拉框

代码：


<!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>
       * {
           margin: 0;
           padding: 0;
       }

.nav {
           margin: 100px auto;
           width: 500px;
       }

.nav>li {
           float: left;
       }

li {
           list-style: none;
       }

a {
           display: block;
           text-decoration: none;
           color: gray;
           height: 40px;
           width: 100px;
           text-align: center;
           line-height: 40px;
           box-sizing: border-box;
       }

.nav>li>a {
           color: black;
       }

.nav>li>a:hover {
           background-color: lightgray;
       }

.nav>li>ul>li>a {
           /* display: none; */
           border: 1px solid orange;
           border-top: none;
       }

.nav>li>ul>li>a:hover {
           background-color: lightyellow;
       }

.nav>li>ul {
           display: none;
       }
   </style>
</head>

<body>
   <ul class="nav" id=nav>
       <li>
           <a href="#" >新浪</a>
           <ul>
               <li><a href="#">新闻</a> </li>
               <li><a href="#">体育</a> </li>
               <li><a href="#">快讯</a> </li>
               <li><a href="#">生活</a> </li>
               <li><a href="#">微博</a> </li>
           </ul>
       </li>
       <li>
           <a href="#" >新浪</a>
           <ul>
               <li><a href="#">新闻1</a> </li>
               <li><a href="#">体育1</a> </li>
               <li><a href="#">快讯1</a> </li>
               <li><a href="#">生活1</a> </li>
               <li><a href="#">微博1</a> </li>
           </ul>
       </li>

<li>
           <a href="#" >新浪</a>
           <ul>
               <li><a href="#">新闻2</a> </li>
               <li><a href="#">体育2</a> </li>
               <li><a href="#">快讯2</a> </li>
               <li><a href="#">生活2</a> </li>
               <li><a href="#">微博2</a> </li>
           </ul>
       </li>

</ul>

<script>
       var heads = document.querySelectorAll('.nav>li');
       for (var i = 0; i < heads.length; i++) {
           heads[i].onmouseover = function() {
               this.children[1].style.display = "block";
           }
           heads[i].onmouseout = function() {
               this.children[1].style.display = "none";

}
       }
   </script>
</body>

</html>

来源：https://blog.csdn.net/KathyLJQ/article/details/115585358

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com