PC端前端开发中实现鼠标移入动态菜单的多种方式

A丹2025-04-27 10:46

在PC端前端开发中，实现鼠标移入后出现动态菜单有多种实现方式，下面我将列举常见的方法并提供简单示例代码。

1. 纯CSS实现 (hover伪类)

这是最简单的方式，利用CSS的:hover伪类触发菜单显示。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<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);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="dropdown">
  <span>鼠标移入我</span>
  <div class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</div>

</body>
</html>

2. CSS过渡动画实现

在显示/隐藏时添加平滑的过渡效果。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
</style>
</head>
<body>

<div class="dropdown">
  <span>鼠标移入我(有动画)</span>
  <div class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</div>

</body>
</html>

3. JavaScript事件监听实现

使用mouseover/mouseout或mouseenter/mouseleave事件。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
</style>
</head>
<body>

<div id="dropdown">
  <span>鼠标移入我(JS控制)</span>
  <div id="dropdown-content" class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</div>

<script>
const dropdown = document.getElementById('dropdown');
const content = document.getElementById('dropdown-content');

dropdown.addEventListener('mouseenter', () => {
  content.style.display = 'block';
});

dropdown.addEventListener('mouseleave', () => {
  content.style.display = 'none';
});
</script>

</body>
</html>

4. jQuery实现

使用jQuery简化DOM操作和事件处理。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="dropdown">
  <span>鼠标移入我(jQuery)</span>
  <div class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</div>

<script>
$(document).ready(function() {
  $('#dropdown').hover(
    function() {
      $(this).find('.dropdown-content').stop(true, true).fadeIn(300);
    },
    function() {
      $(this).find('.dropdown-content').stop(true, true).fadeOut(300);
    }
  );
});
</script>

</body>
</html>

5. Vue.js实现

使用Vue的指令和数据绑定。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown-content.show {
  display: block;
}
</style>
</head>
<body>

<div id="app">
  <div class="dropdown" 
       @mouseenter="showMenu = true" 
       @mouseleave="showMenu = false">
    <span>鼠标移入我(Vue)</span>
    <div class="dropdown-content" :class="{show: showMenu}">
      <p>菜单项1</p>
      <p>菜单项2</p>
      <p>菜单项3</p>
    </div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    showMenu: false
  }
});
</script>

</body>
</html>

6. React实现

使用React的状态和事件处理。

jsx 复制代码 
import React, { useState } from 'react';

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div 
      className="dropdown" 
      onMouseEnter={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
    >
      <span>鼠标移入我(React)</span>
      {isOpen && (
        <div className="dropdown-content">
          <p>菜单项1</p>
          <p>菜单项2</p>
          <p>菜单项3</p>
        </div>
      )}
    </div>
  );
}

// 对应的CSS
// .dropdown {
//   position: relative;
//   display: inline-block;
// }
// .dropdown-content {
//   position: absolute;
//   background-color: #f9f9f9;
//   min-width: 160px;
//   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
//   padding: 12px 16px;
//   z-index: 1;
// }

7. CSS动画关键帧实现

使用@keyframes创建更复杂的动画效果。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  
  opacity: 0;
  transform: scale(0.8);
  transform-origin: top center;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
</style>
</head>
<body>

<div class="dropdown">
  <span>鼠标移入我(弹性动画)</span>
  <div class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</div>

</body>
</html>

8. Web Components实现

使用自定义元素封装菜单组件。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
</style>
</head>
<body>

<custom-dropdown>
  <span slot="trigger">鼠标移入我(Web组件)</span>
  <div slot="content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</custom-dropdown>

<script>
class CustomDropdown extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          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);
          padding: 12px 16px;
          z-index: 1;
        }
      </style>
      <div class="dropdown">
        <slot name="trigger"></slot>
        <div class="dropdown-content">
          <slot name="content"></slot>
        </div>
      </div>
    `;
    
    this.dropdown = this.shadowRoot.querySelector('.dropdown');
    this.content = this.shadowRoot.querySelector('.dropdown-content');
    
    this.dropdown.addEventListener('mouseenter', () => {
      this.content.style.display = 'block';
    });
    
    this.dropdown.addEventListener('mouseleave', () => {
      this.content.style.display = 'none';
    });
  }
}

customElements.define('custom-dropdown', CustomDropdown);
</script>

</body>
</html>

9. GSAP动画库实现

使用GSAP创建更专业的动画效果。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  opacity: 0;
  transform: translateY(-10px);
}
</style>
</head>
<body>

<div id="dropdown">
  <span>鼠标移入我(GSAP动画)</span>
  <div id="dropdown-content" class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</div>

<script>
const dropdown = document.getElementById('dropdown');
const content = document.getElementById('dropdown-content');

dropdown.addEventListener('mouseenter', () => {
  gsap.to(content, {
    opacity: 1,
    y: 0,
    duration: 0.3,
    ease: "power2.out"
  });
});

dropdown.addEventListener('mouseleave', () => {
  gsap.to(content, {
    opacity: 0,
    y: -10,
    duration: 0.2,
    ease: "power2.in"
  });
});
</script>

</body>
</html>

10. 使用CSS框架实现

利用Bootstrap等CSS框架内置的组件。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    鼠标移入我(Bootstrap)
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">菜单项1</a></li>
    <li><a class="dropdown-item" href="#">菜单项2</a></li>
    <li><a class="dropdown-item" href="#">菜单项3</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Bootstrap 5默认需要点击触发，改为鼠标悬停
const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
dropdownElementList.map(function (dropdownToggleEl) {
  dropdownToggleEl.addEventListener('mouseenter', function () {
    const dropdownMenu = dropdownToggleEl.nextElementSibling;
    dropdownMenu.classList.add('show');
  });
  
  const dropdown = dropdownToggleEl.closest('.dropdown');
  dropdown.addEventListener('mouseleave', function () {
    const dropdownMenu = dropdown.querySelector('.dropdown-menu');
    dropdownMenu.classList.remove('show');
  });
});
</script>

</body>
</html>

总结

以上列举了10种实现鼠标移入动态菜单的方法，从最简单的CSS hover到复杂的框架实现，开发者可以根据项目需求和技术栈选择最适合的方式。对于简单的需求，纯CSS实现是最轻量级的解决方案；对于需要复杂交互和动画的场景，可以考虑使用JavaScript或动画库实现。

相关推荐
懒羊羊我小弟3 分钟前
React Router v7 从入门到精通指南
前端·react.js·前端框架
DC...34 分钟前
vue滑块组件设计与实现
前端·javascript·vue.js
Mars狐狸42 分钟前
AI项目改用服务端组件实现对话？包体积减小50%！
前端·react.js
H5开发新纪元1 小时前
Vite 项目打包分析完整指南：从配置到优化
前端·vue.js
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.3响应式革新与TypeScript高效开发实战指南》
前端·后端
恋猫de小郭1 小时前
腾讯 Kuikly 正式开源，了解一下这个基于 Kotlin 的全平台框架
android·前端·ios
2301_799404911 小时前
如何修改npm的全局安装路径？
前端·npm·node.js
(❁´◡双辞`❁)*✲ﾟ*1 小时前
node入门和npm
前端·npm·node.js
韩明君1 小时前
前端学习笔记（四）自定义组件控制自己的css
前端·笔记·学习
tianchang1 小时前
TS入门教程
前端·typescript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07西电B测-计算机网络综合实验(含验收问题)08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09苍穹外卖面试总结10最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）