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

一、实例需求 ⌛

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

二、代码实现 ☕

  
  
  




      
        鼠标移动到这里，会出现下拉列表
      
  

    表单-1

    表单-2

    表单-3

    表单-4

    表单-5
  

思路分析和代码解释： 

这个标签

是一个包裹下拉列表的容器。它使用 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'，使其隐藏。

总结起来就是：

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