Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript:鼠标事件，动态创建导航下拉列表
Blogger Information
Blog 70
fans 4
comment 5
visits 104697
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript:鼠标事件，动态创建导航下拉列表
JiaJieChen
Original
727 people have browsed it

JavaScript:鼠标事件，动态创建导航下拉列表

鼠标事件 含义
onmouseout 鼠标移出
onmouseover 鼠标移入

代码块，可看注释

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>js动态创建下拉列表</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: white;
  17.       }
  18.       li {
  19.         list-style: none;
  20.       }
  21.       li:hover {
  22.         background: yellowgreen;
  23.       }
  24.       .box {
  25.         border: 1px solid;
  26.         width: 100px;
  27.         margin: 40px auto;
  28.         text-align: center;
  29.         background-color: rgb(2, 1, 1);
  30.         color: white;
  31.       }
  32.       .box > #list {
  33.         display: none;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div class="box">
  39.       <h3 id="title">商品</h3>
  40.       <ul id="list">
  41.         <li><a href="">服饰</a></li>
  42.         <li><a href="">饰品</a></li>
  43.         <li><a href="">珠宝</a></li>
  44.       </ul>
  45.     </div>
  47.     <script>
  48.       //   onmouseout 移除  onmouseover 移入
  50.       //拿到box盒子 拿到list商品列表
  51.       let box = document.querySelector(".box");
  52.       let list = document.querySelector("#list");
  54.       //设置鼠标移入 商品列表显示
  55.       box.onmouseover = () => {
  56.         list.style.display = "block";
  57.       };
  58.       //设置鼠标移除时 商品列表消失
  59.       box.onmouseout = () => {
  60.         list.style.display = "none";
  61.       };
  62.     </script>
  63.   </body>
  64. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post