JavaScript 实现鼠标悬停保持效果-html教程-PHP中文网

JavaScript 实现鼠标悬停保持效果

心靈之曲

发布： 2025-10-09 11:30:15

原创

696人浏览过

javascript 实现鼠标悬停保持效果

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

实现原理

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

具体步骤

获取所有菜单项元素

首先，需要获取所有具有 menu-item 类的元素。document.getElementsByClassName 方法返回一个 HTMLCollection，我们需要将其转换为数组，以便使用 forEach 方法进行迭代。可以使用扩展运算符 ... 来完成转换。

立即学习“Java免费学习笔记（深入）”；
```
const menuItems = [...document.getElementsByClassName('menu-item')];
```
登录后复制
为每个菜单项添加 mouseover 事件监听器

火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

使用 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，可以创建出更加丰富和交互性强的用户界面。

以上就是JavaScript 实现鼠标悬停保持效果的详细内容，更多请关注php中文网其它相关文章！