实现
鼠标悬浮
显示下拉列表可以通过
HTML、
CSS 和 JavaScript 来完成，以下分别介绍不同的实现方式。
### 纯
CSS 实现
这种方式利用
CSS 的 `:
hover` 伪类来控制下拉列表的
显示与隐藏。
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1
.0">
<style>
/* 定义容器样式 */
.dropdown {
position: relative;
display: inline
-block;
}
/* 定义按钮样式 */
.dropbtn {
background
-color: #4CAF50;
color: white;
padding: 16px;
font
-size: 16px;
border: none;
}
/* 定义下拉内容样式，默认隐藏 */
.dropdown
-content {
display: none;
position: absolute;
background
-color: #f9f9f9;
min
-width: 160px;
box
-shadow: 0px 8px 16px 0px rgba
(0, 0, 0, 0
.2
);
z
-index: 1;
}
/* 定义下拉内容中的链接样式 */
.dropdown
-content a {
color: black;
padding: 12px 16px;
text
-decoration: none;
display: block;
}
/*
鼠标悬停在下拉内容链接上
时的样式 */
.dropdown
-content a:
hover {
background
-color: #f1f1f1
}
/*
鼠标悬停在容器上
时显示下拉内容 */
.dropdown:
hover .dropdown
-content {
display: block;
}
/*
鼠标悬停在按钮上
时的样式 */
.dropdown:
hover .dropbtn {
background
-color: #3e8e41;
}
</style>
</head>
<body>
<
div class="dropdown">
<button class="dropbtn">
下拉菜单</button>
<
div class="dropdown
-content">
<a href="#">选项 1</a>
<a href="#">选项 2</a>
<a href="#">选项 3</a>
</
div>
</
div>
</body>
</
html>
```
在上述代码中，`
.dropdown` 是一个相对定位的容器，`
.dropbtn` 是触发下拉列表的按钮，`
.dropdown
-content` 是下拉列表的内容，默认是隐藏的。当
鼠标悬停在 `
.dropdown` 容器上
时，通过 `:
hover` 伪类将 `
.dropdown
-content` 的 `display` 属性设置为 `block`，从而
显示下拉列表。
### JavaScript 实现
可以使用 JavaScript 监听
鼠标的 `mouseover` 和 `mouseout` 事件来控制下拉列表的
显示与隐藏。
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1
.0">
<style>
/* 定义容器样式 */
.dropdown {
position: relative;
display: inline
-block;
}
/* 定义按钮样式 */
.dropbtn {
background
-color: #4CAF50;
color: white;
padding: 16px;
font
-size: 16px;
border: none;
}
/* 定义下拉内容样式，默认隐藏 */
.dropdown
-content {
display: none;
position: absolute;
background
-color: #f9f9f9;
min
-width: 160px;
box
-shadow: 0px 8px 16px 0px rgba
(0, 0, 0, 0
.2
);
z
-index: 1;
}
/* 定义下拉内容中的链接样式 */
.dropdown
-content a {
color: black;
padding: 12px 16px;
text
-decoration: none;
display: block;
}
/*
鼠标悬停在下拉内容链接上
时的样式 */
.dropdown
-content a:
hover {
background
-color: #f1f1f1
}
</style>
</head>
<body>
<
div class="dropdown">
<button class="dropbtn" onmouseover="showDropdown
()" onmouseout="hideDropdown
()">
下拉菜单</button>
<
div id="myDropdown" class="dropdown
-content">
<a href="#">选项 1</a>
<a href="#">选项 2</a>
<a href="#">选项 3</a>
</
div>
</
div>
<script>
function showDropdown
() {
document
.getElementById
("myDropdown"
).style
.display = "block";
}
function hideDropdown
() {
document
.getElementById
("myDropdown"
).style
.display = "none";
}
</script>
</body>
</
html>
```
在这个例子中，给按钮添加了 `onmouseover` 和 `onmouseout` 事件，分别调用 `showDropdown` 和 `hideDropdown` 函数。`showDropdown` 函数将下拉列表的 `display` 属性设置为 `block` 来
显示下拉列表，`hideDropdown` 函数将其设置为 `none` 来隐藏下拉列表。
本文介绍了一种简洁且易于修改的下拉菜单实现方法，适用于Vue.js项目。通过提供的HTML和CSS代码示例，展示了如何创建有菜单选项和无菜单选项的两种下拉菜单样式。
订阅专栏 解锁全文
扫一扫
8696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
