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

新闻中心 NEWS CENTER

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

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

2025-10-17

浏览次数：次

返回列表

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

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

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

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

实现原理

核心思路是通过 J*aScript 监听 .first 区域内

元素的 mouseover 和 mouseout 事件。当 mouseover 事件触发时，获取当前

元素的 ID，然后使用 querySelectorAll 查找所有具有相同 ID 的元素，并为第二个匹配

到的元素（即 .second 区域内的元素）添加 .active 类。当 mouseout 事件触发时，执行相反的操作，移除 .active 类。

具体实现步骤

HTML 结构： 首先，我们需要定义 HTML 结构，包含两个区域 .first 和 .second，每个区域包含一个
- 元素具有相同的 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>
```
- J*aScript 代码： 接下来，编写 J*aScript 代码来实现 hover 联动效果。
```
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 区域内所有的
- 元素。然后，使用 forEach 循环遍历这些元素，并为每个元素添加 mouseover 和 mouseout 事件监听器。
  在 mouseover 事件处理函数中，e.target.id 获取当前
  万相营造
  阿里妈妈推出的AI电商营销工具
  168 查看详情
- 元素的 ID。然后，使用 querySelectorAll(\#${e.target.id}`)[1]查找所有具有相同 ID 的元素，并选择第二个匹配到的元素。最后，使用classList.add("active")为该元素添加.active` 类。
  mouseout 事件处理函数执行相反的操作，使用 classList.remove("active") 移除 .active 类。
- CSS 样式： 为了使 .active 类生效，我们需要定义相应的 CSS 样式。
```
.active {
  background: #CCC;
}
```
  这段代码定义了 .active 类的样式，将背景色设置为灰色。

代码示例

将以上 HTML、J*aScript 和 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 操作可能会影响性能。可以考虑使用事件委托或其他优化技巧。
可维护性： 为了提高代码的可维护性，可以将 J*aScript 代码封装成函数或模块。

总结

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

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

# 当鼠标 # 社交网站建设解决方案 # 民宿营销推广方案案例 # 安徽专业seo # 托管运营推广网站 # 全网通营销推广平台官网 # 十堰网站推广厂家 # 河南抖音seo项目公司 # 福建seo公司推荐排名 # 网站推广kpi指标 # 光明区营销推广公司 # 如何使用 # 并为 # css # 第二个 # 这段 # 适用于 # 单选框 # 移除 # 上时 # 表单 # ssl # seo # html # java # javascript