JavaScript 实现 Hover 联动：根据 ID 匹配不同父元素下的元素_技术教程

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

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

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

实现原理

核心思路是通过 JavaScript 监听 .first 区域内

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

元素的 ID，然后使用 querySelectorAll 查找所有具有相同 ID 的元素，并为第二个匹配到的元素（即 .second 区域内的元素）添加 .active 类。当 mouseout 事件触发时，执行相反的操作，移除 .active 类。

具体实现步骤

HTML 结构： 首先，我们需要定义 HTML 结构，包含两个区域 .first 和 .second，每个区域包含一个
- 元素具有相同的 ID。
```
  
    Lorem
    Ipsum
    Dolor
  



  
    Lorem
    Ipsum
    Dolor
  
```
- JavaScript 代码： 接下来，编写 JavaScript 代码来实现 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 获取当前
- 元素的 ID。然后，使用 querySelectorAll(\#${e.target.id}`)[1]查找所有具有相同 ID 的元素，并选择第二个匹配到的元素。最后，使用classList.add("active")为该元素添加.active` 类。
  mouseout 事件处理函数执行相反的操作，使用 classList.remove("active") 移除 .active 类。
- CSS 样式： 为了使 .active 类生效，我们需要定义相应的 CSS 样式。
```
.active {
  background: #CCC;
}
```
  这段代码定义了 .active 类的样式，将背景色设置为灰色。

代码示例

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




  Hover 联动示例
  



  
    
      Lorem
      Ipsum
      Dolor
    
  

  
    
      Lorem
      Ipsum
      Dolor

注意事项

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

总结

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