本文旨在提供一种使用纯 JavaScript 实现鼠标悬停效果，并保持该效果直到另一个元素被悬停的方法。通过监听 mouseover 事件，并动态添加和移除 CSS 类，实现菜单项的突出显示效果，确保只有一个菜单项处于激活状态。
实现原理
核心思路是利用 JavaScript 监听每个菜单项的 mouseover 事件。当一个菜单项被悬停时，首先移除所有菜单项的 hover 类，然后仅为当前悬停的菜单项添加 hover 类。这样，就能保证只有一个菜单项拥有 hover 类，从而实现高亮显示当前悬停项的效果。
具体步骤
-
获取所有菜单项元素
首先，需要获取所有具有 menu-item 类的元素。document.getElementsByClassName 方法返回一个 HTMLCollection，我们需要将其转换为数组，以便使用 forEach 方法进行迭代。可以使用扩展运算符 ... 来完成转换。
立即学习“Java免费学习笔记（深入）”；
const menuItems = [...document.getElementsByClassName('menu-item')]; -
为每个菜单项添加 mouseover 事件监听器
使用 forEach 方法遍历 menuItems 数组，为每个菜单项添加 mouseover 事件监听器。
menuItems.forEach(item => item.addEventListener('mouseover', () => { // 处理鼠标悬停事件 })); -
在 mouseover 事件处理函数中移除和添加 hover 类
在 mouseover 事件处理函数中，首先遍历整个 menuItems 数组，移除所有菜单项的 hover 类。然后，为当前悬停的菜单项添加 hover 类。
menuItems.forEach(item => item.addEventListener('mouseover', () => { menuItems.forEach(item => item.classList.remove('hover')); item.classList.add('hover'); }));
完整代码示例
以下是完整的 HTML、CSS 和 JavaScript 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Hover Effect</title>
<style>
#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 .2s;}
.menu-item.hover {margin-left: 15px;}
</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', () => {
menuItems.forEach(item => item.classList.remove('hover'));
item.classList.add('hover');
}));
</script>
</body>
</html>代码解释
- HTML: 定义了一个包含多个 menu-item 类的 div 元素，模拟菜单结构。
- CSS: 定义了 menu-item 类的样式，包括颜色、字体等。menu-item.hover 类定义了鼠标悬停时的样式，这里使用了 margin-left 来实现一个简单的位移动画效果。transition属性用于使位移变化更平滑。
- JavaScript: 实现了上述的逻辑，获取所有 menu-item 元素，并为每个元素添加 mouseover 事件监听器，动态添加和移除 hover 类。
注意事项
- 确保 CSS 中定义了 hover 类的样式，以便在鼠标悬停时产生视觉效果。
- 如果菜单项是动态生成的，需要在生成菜单项后重新执行 JavaScript 代码，以便为新生成的菜单项添加事件监听器。
- 该方法适用于简单的菜单效果。对于更复杂的交互，可能需要使用更高级的技术，如事件委托或状态管理。
总结
通过本文，你学习了如何使用纯 JavaScript 实现鼠标悬停保持效果，并保持该效果直到另一个元素被悬停。这种方法简单易懂，适用于大多数简单的菜单场景。通过灵活运用 CSS 和 JavaScript，可以创建出更加丰富和交互性强的用户界面。
