纯 JavaScript 实现 Hover 菜单栏效果 | 前端开发技巧

本文介绍如何使用纯 JavaScript、HTML 和 CSS 创建一个 Hover 菜单栏，当鼠标悬停在菜单项上时，子菜单将显示出来。文章提供了详细的代码示例，并解释了实现原理。

HTML 结构

<nav>
  <ul>
    <li><a href='#'>菜单项 1</a>
      <ul>
        <li><a href='#'>子菜单项 1</a></li>
        <li><a href='#'>子菜单项 2</a></li>
        <li><a href='#'>子菜单项 3</a></li>
      </ul>
    </li>
    <li><a href='#'>菜单项 2</a></li>
    <li><a href='#'>菜单项 3</a>
      <ul>
        <li><a href='#'>子菜单项 1</a></li>
        <li><a href='#'>子菜单项 2</a></li>
        <li><a href='#'>子菜单项 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS 样式

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
  position: relative;
}

nav a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

nav ul li:hover > ul {
  display: inherit;
}

JavaScript 代码

var nav = document.querySelector('nav');

nav.addEventListener('mouseover', function(e) {
  if (e.target.parentElement.tagName === 'LI') {
    var li = e.target.parentElement;
    var ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  }
});

nav.addEventListener('mouseout', function(e) {
  if (e.target.parentElement.tagName === 'LI') {
    var li = e.target.parentElement;
    var ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  }
});

这段代码首先获取了导航栏的 DOM 节点，然后分别添加了鼠标悬停（mouseover）和鼠标离开（mouseout）事件监听器。当鼠标悬停在菜单项上时，代码会查找该菜单项的子菜单，并将其设置为可见。当鼠标离开菜单项时，代码会将子菜单设置为隐藏。

这样，当鼠标移动到菜单项上时，子菜单就会显示出来。当鼠标离开菜单时，子菜单就会隐藏起来。