鼠标悬停显示下拉内容js菜单

基础概念

鼠标悬停显示下拉内容的JS菜单是一种常见的网页交互设计，通过JavaScript监听鼠标事件（如mouseenter和mouseleave），在鼠标悬停在特定元素上时显示一个下拉菜单，并在鼠标移开时隐藏该菜单。

类型

纯CSS实现：使用CSS的:hover伪类来实现简单的悬停效果。
JavaScript实现：通过添加事件监听器来控制菜单的显示和隐藏。
框架集成：如React、Vue等前端框架通常有现成的组件库支持此类功能。

应用场景

导航栏：网站顶部导航栏中的多级菜单。
侧边栏：侧边栏中的快速访问选项。
工具提示：鼠标悬停时显示额外信息的提示框。

示例代码（JavaScript实现）

以下是一个简单的JavaScript示例，展示如何实现鼠标悬停显示下拉菜单：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Dropdown Menu</title>
<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .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>Mouse over me</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<script>
  document.querySelector('.dropdown').addEventListener('mouseenter', function() {
    document.querySelector('.dropdown-content').style.display = 'block';
  });
  document.querySelector('.dropdown').addEventListener('mouseleave', function() {
    document.querySelector('.dropdown-content').style.display = 'none';
  });
</script>

</body>
</html>