html鼠标移上去出现二级菜单js
时间: 2023-09-04 09:10:08 浏览: 57
好的,让我来回答你的问题。
要实现鼠标移上去出现二级菜单,可以通过JavaScript来实现。具体的实现方式如下:
1. 编写HTML代码,包含一级菜单和二级菜单的HTML元素。
2. 使用CSS将二级菜单设置为隐藏状态。
3. 在JavaScript中添加事件监听器,当鼠标移动到一级菜单上时,显示二级菜单。
4. 当鼠标移开一级菜单时,隐藏二级菜单。
下面是一个简单的示例代码,供你参考:
HTML代码:
```
<ul>
<li>一级菜单1</li>
<li>一级菜单2
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单3</li>
</ul>
```
CSS代码:
```
ul ul {
display: none;
}
```
JavaScript代码:
```
var firstLevelMenu = document.getElementsByTagName("li");
for (var i = 0; i < firstLevelMenu.length; i++) {
firstLevelMenu[i].addEventListener("mouseover", function() {
var secondLevelMenu = this.getElementsByTagName("ul")[0];
if (secondLevelMenu) {
secondLevelMenu.style.display = "block";
}
});
firstLevelMenu[i].addEventListener("mouseout", function() {
var secondLevelMenu = this.getElementsByTagName("ul")[0];
if (secondLevelMenu) {
secondLevelMenu.style.display = "none";
}
});
}
```
这样,当鼠标移动到一级菜单上时,就会显示对应的二级菜单;当鼠标移开一级菜单时,二级菜单就会隐藏。