J*aScript 菜单项持久化 Hover 效果实现教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 菜单项持久化 Hover 效果实现教程

2025-10-09

浏览次数：次

返回列表

JavaScript 菜单项持久化 Hover 效果实现教程

本文将详细讲解如何使用纯 J*aScript 实现一个菜单项的持久化 hover 效果。当鼠标悬停在某个菜单项上时，该项会保持其激活状态，直到鼠标悬停到另一个菜单项上时，前一个菜单项的激活状态才会被移除。本教程将通过清晰的 HTML、CSS 和 J*aScript 代码示例，逐步指导读者完成这一功能，无需任何外部库。

1. 概述

在构建交互式网页菜单时，我们经常需要实现当鼠标悬停（hover）在某个菜单项上时，该项显示一个特定的样式或动画，并且这个样式能够保持，直到用户将鼠标移到另一个菜单项上。传统的 mouseover 和 mouseout 事件组合通常会导致鼠标移出当前元素时，样式立即消失，这不符合我们的持久化需求。本教程将展示如何利用纯 j*ascript 结合 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" 则用于标识每个独立的菜单项，方便 J*aScript 选中和操作。

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 类定义了激活状态下的样式。当 J*aScript 为某个菜单项添加 hover 类时，该样式就会生效；移除时则恢复原样。transition 属性确保了 margin-left 变化时有一个平滑的动画效果。

4. J*aScript 实现

核心逻辑在于 J*aScript。我们需要监听每个菜单项的 mouseover 事件，并在事件触发时执行以下操作：

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

移除所有菜单项上的 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 等方法，我们使用 ... 展开运算符将其转换为一个真正的 J*aScript 数组 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 类，从而实现了持久化的激活状态，直到另一个菜单项被悬停。

5. 完整代码示例

将上述 HTML、CSS 和 J*aScript 结合起来，构成一个完整的可运行示例：




    
    
    持久化菜单Hover效果
    



    
        Item 1
        Item 2
        Item 3
        Item 4
    

    <script>
        const menuItems = [...document.getElementsByClassName('menu-item')];

        menuItems.forEach(item => {
            item.addEventListener('mouseover', () => {
                // 移除所有菜单项的 'hover' 类
                menuItems.forEach(menuItem =&gt; menuItem.classList.remove('hover'));

                // 为当前鼠标悬停的菜单项添加 'hover' 类
                item.classList.add('hover');
            });
        });
    </script>

6. 注意事项与总结

纯 J*aScript: 此解决方案完全基于原生 J*aScript 和 CSS，不依赖任何外部库（如 jQuery），这使得代码轻量且易于理解。
动态菜单: 即使菜单项是动态生成或数量可变，此方法也适用，因为 getElementsByClassName 总是会获取当前 DOM 中所有匹配的元素。
mouseover vs mouseenter: 在这个场景中，mouseover 和 mouseenter 都可以使用。mouseover 会在鼠标进入元素及其子元素时触发，而 mouseenter 只在鼠标进入元素本身时触发。对于简单的菜单项，两者效果相似。
可访问性: 对于生产环境的菜单，除了 mouseover 事件，还应考虑添加 focus 事件监听器，以支持键盘导航用户。当菜单项获得焦点时，也为其添加 hover 类，失去焦点时移除（如果需要）。
性能: 对于数量非常庞大的菜单项，每次 mouseover 都遍历所有元素并移除类可能存在轻微的性能开销，但对于常见的网页菜单（几十个菜单项以内），这种开销可以忽略不计。

通过本教程，您已经学会了如何使用简洁的纯 J*aScript 代码实现一个功能强大且用户体验良好的持久化菜单 hover 效果。这种模式在许多交互式 UI 组件中都非常有用。

以上就是J*aScript 菜单项持久化 Hover 效果实现教程的详细内容，更多请关注其它相关文章！

# 运算符 # 晋江建设旅社招聘网站 # seo外贸推广哪家好 # 易天下seo # 网站外部优化是什么 # 夜猫影视网站建设 # seo推广在哪接单好做 # 黄岛小语种网站建设 # 做谷歌seo # 国际站店铺网站建设 # 图书营销推广培训 # 将其 # 单选框 # 就会 # css # 上时 # 表单 # 遍历 # 移除 # 鼠标 # 菜单项 # ssl # seo # html # jquery # java # javascript