一、实例需求 ⌛
实现类似百度首页的“一个简单的鼠标悬停显示的下拉列表效果”。
二、代码实现 ☕
<!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>
思路分析和代码解释:
这个标签
<div class="dropdown">
是一个包裹下拉列表的容器。它使用 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 区域时,下拉列表将消失。