JavaWeb（9）——前端综合案例3（悬停显示下拉列表）

约定不等于承诺〃 2023-10-12 10:19 2阅读 0赞

## 一、实例需求 ⌛ ##

实现类似百度首页的“一个简单的鼠标悬停显示的下拉列表效果”。

![fc24c8c7a2f845a19e12279fc7c0e4c5.png][]

![304c5c4247114dc5949faea23be759bb.png][]

## 二、代码实现 ☕ ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
    
        .dropdown-content a {
          color: black; /* 修改链接的颜色为黑色 */
          text-decoration: none; /* 去掉下拉列表链接的下划线 */
        }
    
        .dropdown{
          position: relative;
          display:inline-block;
        }
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 90px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/* 添加阴影 */
          cursor: pointer; /* 设置鼠标悬停样式为手型 */
          padding: 5px 10px;
          border-radius: 5px; /* border-radius 属性被用于创建圆角*/
        }
        .dropdown:hover.dropdown-content {
          display:block;
        }
        .dropdown span:hover {
          color: red; /* 当鼠标悬停时，将文本颜色更改为红色 */
        }
        .dropdown-content a:hover {
          color: deepskyblue; /* 当鼠标悬停时，将链接文本颜色更改为蓝色 */
        }
      </style>
    </head>
    <body>
    
    <div class= "dropdown">
          <span>
            鼠标移动到这里，会出现下拉列表
          </span>
      <div class="dropdown-content">
        <a href="https://www.baidu.com">表单-1<br></a>
        <a href="https://www.jd.com">表单-2<br></a>
        <a href="https://www.taobao.com">表单-3<br></a>
        <a href="https://www.souhu.com">表单-4<br></a>
        <a href="https://www.sougou.com">表单-5</a>
      </div>
    </div>
    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        let dropdown = document.querySelector('.dropdown');
        dropdown.addEventListener('mouseover', function() {
          let dropdownContent = this.querySelector('.dropdown-content');
          dropdownContent.style.display = 'block';
        });
        dropdown.addEventListener('mouseout', function() {
          let dropdownContent = this.querySelector('.dropdown-content');
          dropdownContent.style.display = 'none';
        });
      });
    </script>
    </body>
    </html>

**思路分析和代码解释：**

这个标签

是一个包裹下拉列表的容器。它使用 CSS 中的 position: relative; 和 display: inline-block; 属性来控制其在页面中的位置和显示方式。

当鼠标悬停在 .dropdown 容器上方时，通过 CSS 选择器 .dropdown:hover .dropdown-content 的规则，将下拉列表设置为显示（display: block;）元素会以块级元素的方式进行显示。当页面内容加载完成后，`DOMContentLoaded` 事件会被触发。在该事件的回调函数中，以下代码将执行：

let dropdown = document.querySelector('.dropdown');

这行代码使用 `document.querySelector` 方法选择页面中第一个带有 `.dropdown` 类的元素，并将其赋值给变量 `dropdown`。

dropdown.addEventListener('mouseover', function() { 
    let dropdownContent = this.querySelector('.dropdown-content'); 
    dropdownContent.style.display = 'block'; });

当鼠标移入 `.dropdown` 元素时，`mouseover` 事件被触发，然后执行回调函数。在回调函数中`this` 指向触发事件的元素本身（即 `.dropdown` 元素），通过 `this.querySelector('.dropdown-content')` 找到该元素内部带有 `.dropdown-content` 类的元素，并将其赋值给变量 `dropdownContent`。然后将 `dropdownContent` 的 `display` 样式属性设置为 `'block'`，使其可见。

dropdown.addEventListener('mouseout', function() { 
    let dropdownContent = this.querySelector('.dropdown-content'); 
    dropdownContent.style.display = 'none'; });

当鼠标移出 `.dropdown` 元素时，`mouseout` 事件被触发，然后执行回调函数。回调函数中的逻辑与上述类似，通过 `this.querySelector('.dropdown-content')` 找到 `.dropdown` 元素内部的 `.dropdown-content` 元素，并将其赋值给变量 `dropdownContent`。然后，将 `dropdownContent` 的 `display` 样式属性设置为 `'none'`，使其隐藏。

![5c47f6251bf44d518b139f9f699b5fcb.png][]![6f7a99cb5913409eb1685c4516a7b987.png][]

总结起来就是：

JavaScript 部分的代码监听了页面的 DOMContentLoaded 事件，确保在文档加载完毕后再执行代码。一旦页面加载完成，它会找到 .dropdown 元素，并为它添加两个事件监听器。 第一个事件监听器是 mouseover，当鼠标指针进入 .dropdown 区域时触发。它会找到 .dropdown 元素内部的 .dropdown-content 元素，并将其显示出来（通过修改其 CSS 属性 display 为 'block'） 第二个事件监听器是 mouseout，当鼠标指针离开 .dropdown 区域时触发。它也会找到 .dropdown 元素内部的 .dropdown-content 元素，并将其隐藏（通过修改其 CSS 属性 display 为 'none'）。这样当鼠标移出 .dropdown 区域时，下拉列表将消失。

[fc24c8c7a2f845a19e12279fc7c0e4c5.png]: https://img-blog.csdnimg.cn/fc24c8c7a2f845a19e12279fc7c0e4c5.png
[304c5c4247114dc5949faea23be759bb.png]: https://img-blog.csdnimg.cn/304c5c4247114dc5949faea23be759bb.png
[5c47f6251bf44d518b139f9f699b5fcb.png]: https://img-blog.csdnimg.cn/5c47f6251bf44d518b139f9f699b5fcb.png
[6f7a99cb5913409eb1685c4516a7b987.png]: https://img-blog.csdnimg.cn/6f7a99cb5913409eb1685c4516a7b987.png