本文将详细讲解如何使用纯 JavaScript 实现一个菜单项的持久化 hover 效果。当鼠标悬停在某个菜单项上时，该项会保持其激活状态，直到鼠标悬停到另一个菜单项上时，前一个菜单项的激活状态才会被移除。本教程将通过清晰的 HTML、CSS 和 JavaScript 代码示例，逐步指导读者完成这一功能，无需任何外部库。
1. 概述
在构建交互式网页菜单时，我们经常需要实现当鼠标悬停（hover）在某个菜单项上时，该项显示一个特定的样式或动画，并且这个样式能够保持，直到用户将鼠标移到另一个菜单项上。传统的 mouseover 和 mouseout 事件组合通常会导致鼠标移出当前元素时，样式立即消失，这不符合我们的持久化需求。本教程将展示如何利用纯 javascript 结合 css 类来优雅地解决这个问题，确保在任何时刻只有一个菜单项处于“hover”激活状态。
2. HTML 结构
首先，我们需要一个基本的 HTML 结构来表示我们的菜单。这里使用一个 div 作为菜单容器，内部包含多个 div 作为菜单项。
<div id="menu"> <div class="menu-item">Item 1</div> <div class="menu-item">Item 2</div> <div class="menu-item">Item 3</div> <div class="menu-item">Item 4</div> </div>
id=”menu” 用于标识整个菜单区域，而 class=”menu-item” 则用于标识每个独立的菜单项，方便 JavaScript 选中和操作。
3. CSS 样式
接下来，我们为菜单和菜单项添加一些基础样式，并定义一个 .hover 类，该类将用于表示菜单项的激活状态。为了使效果更平滑，我们还会添加一个 transition 属性。
#menu {
background-color: #0066cc;
padding: 15px;
width: 100%;
}
.menu-item {
height: 25px;
width: fit-content; /* 根据内容调整宽度 */
color: white;
cursor: pointer; /* 提示用户这是可点击元素 */
font-family: sans-serif;
transition: margin-left 0.2s ease-in-out; /* 添加过渡效果，使动画平滑 */
}
/* 当菜单项处于激活状态时应用的样式 */
.menu-item.hover {
margin-left: 15px; /* 例如，向右偏移 */
}
这里，.menu-item.hover 类定义了激活状态下的样式。当 JavaScript 为某个菜单项添加 hover 类时，该样式就会生效；移除时则恢复原样。transition 属性确保了 margin-left 变化时有一个平滑的动画效果。
立即学习“Java免费学习笔记（深入）”；
4. JavaScript 实现
核心逻辑在于 JavaScript。我们需要监听每个菜单项的 mouseover 事件，并在事件触发时执行以下操作：
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。
106
查看详情
- 移除所有菜单项上的 hover 类。
- 为当前触发事件的菜单项添加 hover 类。
这样可以确保在任何给定时间点，只有一个菜单项拥有 hover 类，从而实现持久化效果。
// 1. 获取所有菜单项
// document.getElementsByClassName 返回的是 HTMLCollection，
// 使用展开运算符将其转换为数组，以便使用 Array 的方法，如 forEach。
const menuItems = [...document.getElementsByClassName('menu-item')];
// 2. 遍历所有菜单项，并为每个菜单项添加 'mouseover' 事件监听器
menuItems.forEach(item => {
item.addEventListener('mouseover', () => {
// 3. 事件处理逻辑
// 遍历所有菜单项，移除它们的 'hover' 类
menuItems.forEach(menuItem => menuItem.classList.remove('hover'));
// 为当前鼠标悬停的菜单项添加 'hover' 类
item.classList.add('hover');
});
});
工作原理详解：
-
获取所有菜单项:
document.getElementsByClassName(‘menu-item’) 会返回一个 HTMLCollection。为了方便使用 Array.prototype.forEach 等方法，我们使用 … 展开运算符将其转换为一个真正的 JavaScript 数组 menuItems。const menuItems = [...document.getElementsByClassName('menu-item')]; -
添加事件监听器:
我们使用 menuItems.forEach() 方法遍历这个数组，为每个 menu-item 元素添加一个 mouseover 事件监听器。当鼠标指针移到元素上时，监听器中定义的匿名函数就会被执行。menuItems.forEach(item => item.addEventListener('mouseover', () => { /* ... */ })); -
事件处理逻辑:
在 mouseover 事件被触发时，我们执行以下两步：-
清除所有 hover 类: 再次遍历 menuItems 数组，对每个菜单项调用 classList.remove(‘hover’)。这一步是关键，它确保了在添加新的 hover 类之前，所有现有的 hover 类都被清除。即使某个菜单项当前没有 hover 类，调用 remove 也不会报错。
menuItems.forEach(menuItem => menuItem.classList.remove('hover')); - 添加当前 hover 类: 然后，我们为当前触发事件的 item 添加 hover 类，即 item.classList.add(‘hover’)。
通过这种“先清空，后添加”的策略，我们确保了在任何时候，都只有一个菜单项拥有 hover 类，从而实现了持久化的激活状态，直到另一个菜单项被悬停。
-
清除所有 hover 类: 再次遍历 menuItems 数组，对每个菜单项调用 classList.remove(‘hover’)。这一步是关键，它确保了在添加新的 hover 类之前，所有现有的 hover 类都被清除。即使某个菜单项当前没有 hover 类，调用 remove 也不会报错。
5. 完整代码示例
将上述 HTML、CSS 和 JavaScript 结合起来，构成一个完整的可运行示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>持久化菜单Hover效果</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#menu {
background-color: #0066cc;
padding: 15px;
width: 100%;
box-sizing: border-box; /* 确保 padding 不增加总宽度 */
}
.menu-item {
height: 25px;
width: fit-content;
color: white;
cursor: pointer;
font-family: sans-serif;
margin-bottom: 5px; /* 菜单项之间留有间距 */
transition: margin-left 0.2s ease-in-out; /* 添加过渡效果 */
}
.menu-item:last-child {
margin-bottom: 0; /* 最后一个菜单项不需要底部间距 */
}
/* 激活状态下的样式 */
.menu-item.hover {
margin-left: 15px;
font-weight: bold; /* 增加一些视觉强调 */
}
</style>
</head>
<body>
<div id="menu">
<div class="menu-item">Item 1</div>
<div class="menu-item">Item 2</div>
<div class="menu-item">Item 3</div>
<div class="menu-item">Item 4</div>
</div>
<script>
const menuItems = [...document.getElementsByClassName('menu-item')];
menuItems.forEach(item => {
item.addEventListener('mouseover', () => {
// 移除所有菜单项的 'hover' 类
menuItems.forEach(menuItem => menuItem.classList.remove('hover'));
// 为当前鼠标悬停的菜单项添加 'hover' 类
item.classList.add('hover');
});
});
</script>
</body>
</html>
6. 注意事项与总结
- 纯 JavaScript: 此解决方案完全基于原生 JavaScript 和 CSS，不依赖任何外部库（如 jQuery），这使得代码轻量且易于理解。
- 动态菜单: 即使菜单项是动态生成或数量可变，此方法也适用，因为 getElementsByClassName 总是会获取当前 DOM 中所有匹配的元素。
- mouseover vs mouseenter: 在这个场景中，mouseover 和 mouseenter 都可以使用。mouseover 会在鼠标进入元素及其子元素时触发，而 mouseenter 只在鼠标进入元素本身时触发。对于简单的菜单项，两者效果相似。
- 可访问性: 对于生产环境的菜单，除了 mouseover 事件，还应考虑添加 focus 事件监听器，以支持键盘导航用户。当菜单项获得焦点时，也为其添加 hover 类，失去焦点时移除（如果需要）。
- 性能: 对于数量非常庞大的菜单项，每次 mouseover 都遍历所有元素并移除类可能存在轻微的性能开销，但对于常见的网页菜单（几十个菜单项以内），这种开销可以忽略不计。
通过本教程，您已经学会了如何使用简洁的纯 JavaScript 代码实现一个功能强大且用户体验良好的持久化菜单 hover 效果。这种模式在许多交互式 UI 组件中都非常有用。
暂无评论内容