J*aScript 实现鼠标悬停保持效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

J*aScript 实现鼠标悬停保持效果

2025-10-09

浏览次数：次

返回列表

javascript 实现鼠标悬停保持效果

本文旨在提供一种使用纯 J*aScript 实现鼠标悬停效果，并保持该效果直到另一个元素被悬停的方法。通过监听 mouseover 事件，并动态添加和移除 CSS 类，实现菜单项的突出显示效果，确保只有一个菜单项处于激活状态。

实现原理

核心思路是利用 J*aScript 监听每个菜单项的 mouseover 事件。当一个菜单项被悬停时，首先移除所有菜单项的 hover 类，然后仅为当前悬停的菜单项添加 hover 类。这样，就能保证只有一个菜单项拥有 hover 类，从而实现高亮显示当前悬停项的效果。

具体步骤

获取所有菜单项元素

首先，需要获取所有具有 menu-item 类的元素。document.getElementsByClassName 方法返回一个 HTMLCollection，我们需要将其转换为数组，以便使用 forEach 方法进行迭代。可以使用扩展运算符 ... 来完成转换。
```
const menuItems = [...document.getElementsByClassName('menu-item')];
```
为每个菜单项添加 mouseover 事件监听器

使用 forEach 方法遍历 menuItems 数组，为每个菜单项添加 mouseover 事件监听器。
实用的背景图片鼠标悬停效果
一款实用的背景图片鼠标悬停效果
35 查看详情
```
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 和 J*aScript 代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>J*aScript 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属性用于使位移变化更平滑。
J*aScript: 实现了上述的逻辑，获取所有 menu-item 元素，并为每个元素添加 mouseover 事件监听器，动态添加和移除 hover 类。