JavaScript 实现 Hover 联动：根据 ID 匹配不同父元素下的元素-html教程-PHP中文网

JavaScript 实现 Hover 联动：根据 ID 匹配不同父元素下的元素

碧海醫心

发布： 2025-10-17 08:00:21

原创

626人浏览过

javascript 实现 hover 联动：根据 id 匹配不同父元素下的元素

本文将介绍如何使用 JavaScript 实现一个常见的交互效果：当鼠标悬停在一个区域的特定元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。我们将通过事件监听和 DOM操作，实现当鼠标悬停在 `.first` 区域的 `

` 元素上时，`.second` 区域中具有相同 ID 的 `

` 元素添加 `.active` 类，移开鼠标时移除该类。这种方法适用于 ID 动态生成的情况，提供了一种灵活的解决方案。

实现原理

核心思路是通过 JavaScript 监听 .first 区域内 <li> 元素的 mouseover 和 mouseout 事件。当 mouseover 事件触发时，获取当前 <li> 元素的 ID，然后使用 querySelectorAll 查找所有具有相同 ID 的元素，并为第二个匹配到的元素（即 .second 区域内的元素）添加 .active 类。当 mouseout 事件触发时，执行相反的操作，移除 .active 类。

具体实现步骤

HTML 结构： 首先，我们需要定义 HTML 结构，包含两个区域 .first 和 .second，每个区域包含一个 <ul> 列表，列表中的 <li> 元素具有相同的 ID。

<div class="first">
  <ul>
    <li id="one">Lorem</li>
    <li id="two">Ipsum</li>
    <li id="three">Dolor</li>
  </ul>
</div>

<div class="second">
  <ul>
    <li id="one">Lorem</li>
    <li id="two">Ipsum</li>
    <li id="three">Dolor</li>
  </ul>
</div>

登录后复制

JavaScript 代码： 接下来，编写 JavaScript 代码来实现 hover 联动效果。

立即学习“Java免费学习笔记（深入）”；
```
document.querySelectorAll(".first ul li").forEach(li => {
  li.addEventListener("mouseover", e => {
    document.querySelectorAll(`#${e.target.id}`)[1].classList.add("active");
  });
  li.addEventListener("mouseout", e => {
    document.querySelectorAll(`#${e.target.id}`)[1].classList.remove("active");
  });
});
```
登录后复制
这段代码首先使用 querySelectorAll 选择 .first 区域内所有的 <li> 元素。然后，使用 forEach 循环遍历这些元素，并为每个元素添加 mouseover 和 mouseout 事件监听器。

在 mouseover 事件处理函数中，e.target.id 获取当前 <li> 元素的 ID。然后，使用 querySelectorAll(\#${e.target.id}`)[1]查找所有具有相同 ID 的元素，并选择第二个匹配到的元素。最后，使用classList.add("active")为该元素添加.active` 类。

腾讯元宝
腾讯混元平台推出的AI助手

223

查看详情

mouseout 事件处理函数执行相反的操作，使用 classList.remove("active") 移除 .active 类。
CSS 样式： 为了使 .active 类生效，我们需要定义相应的 CSS 样式。
```
.active {
  background: #CCC;
}
```
登录后复制
这段代码定义了 .active 类的样式，将背景色设置为灰色。

代码示例

将以上 HTML、JavaScript 和 CSS 代码整合在一起，即可实现完整的 hover 联动效果。

<!DOCTYPE html>
<html>
<head>
  <title>Hover 联动示例</title>
  <style>
    .active {
      background: #CCC;
    }
  </style>
</head>
<body>

  <div class="first">
    <ul>
      <li id="one">Lorem</li>
      <li id="two">Ipsum</li>
      <li id="three">Dolor</li>
    </ul>
  </div>

  <div class="second">
    <ul>
      <li id="one">Lorem</li>
      <li id="two">Ipsum</li>
      <li id="three">Dolor</li>
    </ul>
  </div>

  <script>
    document.querySelectorAll(".first ul li").forEach(li => {
      li.addEventListener("mouseover", e => {
        document.querySelectorAll(`#${e.target.id}`)[1].classList.add("active");
      });
      li.addEventListener("mouseout", e => {
        document.querySelectorAll(`#${e.target.id}`)[1].classList.remove("active");
      });
    });
  </script>

</body>
</html>

登录后复制

注意事项

ID 唯一性： 虽然本例中依赖 ID 进行匹配，但请确保页面中 ID 的唯一性，以避免潜在的问题。
性能优化： 如果列表数量非常大，频繁的 DOM 操作可能会影响性能。可以考虑使用事件委托或其他优化技巧。
可维护性： 为了提高代码的可维护性，可以将 JavaScript 代码封装成函数或模块。

总结

本文介绍了如何使用 JavaScript 实现 hover 联动效果，通过监听事件和 DOM 操作，实现了当鼠标悬停在一个区域的元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。这种方法适用于 ID 动态生成的情况，提供了一种灵活的解决方案。同时，也需要注意 ID 唯一性、性能优化和代码可维护性等方面的问题。

以上就是JavaScript 实现 Hover 联动：根据 ID 匹配不同父元素下的元素的详细内容，更多请关注php中文网其它相关文章！