js 鼠标hover 显示二级菜单
时间: 2023-09-04 07:02:37 浏览: 48
在使用 JavaScript 实现鼠标 hover 显示二级菜单时,我们可以通过以下步骤来实现:
1. 在 HTML 中,首先创建一个包含一级菜单的列表,并为每个菜单项添加一个 ID,例如:
```
<ul>
<li id="menu1">菜单1</li>
<li id="menu2">菜单2</li>
<li id="menu3">菜单3</li>
</ul>
```
2. 接下来,创建包含二级菜单内容的 div,并为其设置一个唯一的 ID,例如:
```
<div id="submenu1">二级菜单1的内容</div>
<div id="submenu2">二级菜单2的内容</div>
<div id="submenu3">二级菜单3的内容</div>
```
3. 在 JavaScript 中,我们需要使用事件监听器来监听鼠标的 hover 事件。当鼠标悬停在一级菜单上时,显示相应的二级菜单。我们可以使用 `addEventListener` 方法来实现事件监听,例如:
```
document.getElementById("menu1").addEventListener("mouseover", function() {
document.getElementById("submenu1").style.display = "block";
});
```
4. 为了实现当鼠标移开一级菜单时,隐藏相应的二级菜单,我们需要添加鼠标的移出事件的监听器,例如:
```
document.getElementById("menu1").addEventListener("mouseout", function() {
document.getElementById("submenu1").style.display = "none";
});
```
5. 上述步骤可以根据需要进行重复,以实现其他一级菜单对应的二级菜单的显示和隐藏。
通过上述步骤,我们可以使用 JavaScript 实现鼠标 hover 显示二级菜单的效果。