17370845950

本文介绍如何使用 JavaScript 实现当鼠标悬停在一个 `div.first` 中的 `li` 元素上时，为 `div.second` 中具有相同 ID 的 `li` 元素添加 `.active` 类。该方案适用于 ID 动态生成且事先未知的情况，并提供详细的 JavaScript 代码示例和 CSS 样式，方便读者理解和应用。

在 Web 开发中，有时我们需要实现一种交互效果：当鼠标悬停在一个区域的元素上时，另一个区域的对应元素也发生变化。本文将介绍如何使用 JavaScript 实现这一功能，具体来说，当鼠标悬停在一个 div.first 中的 li 元素上时，为 div.second 中具有相同 ID 的 li 元素添加 .active 类。

实现原理

核心思想是利用 JavaScript 监听 div.first 中所有 li 元素的 mouseover 和 mouseout 事件。当 mouseover 事件触发时，获取当前 li 元素的 ID，然后在 div.second 中查找具有相同 ID 的 li 元素，并添加 .active 类。当 mouseout 事件触发时，移除 .active 类。

代码实现

以下是完整的 JavaScript 代码实现：

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 类下的 ul 元素中的 li 元素。然后，使用 forEach 方法遍历这些 li 元素，并为每个元素添加 mouseover 和 mouseout 事件监听器。

在 mouseover 事件监听器中，e.target.id 获取当前鼠标悬停的 li 元素的 ID。然后，使用 querySelectorAll(#${e.target.id}) 查找具有相同 ID 的所有元素。由于我们需要操作的是 div.second 中的元素，因此我们使用 [1] 来获取第二个匹配的元素（第一个匹配的元素是 div.first 中的 li 元素本身）。最后，使用 classList.add("active") 为该元素添加 .active 类。

mouseout 事件监听器中的逻辑类似，只是将 classList.add("active") 替换为 classList.remove("active")，用于移除 .active 类。

HTML 结构

以下是 HTML 结构示例：

  

    
Lorem
    
Ipsum
    
Dolor
  



  

    
Lorem
    
Ipsum
    
Dolor
  

CSS 样式

为了使 .active 类生效，我们需要定义相应的 CSS 样式：

.active {
  background: #CCC;
}

这段 CSS 代码会将具有 .active 类的元素的背景色设置为灰色。

注意事项

• ID 唯一性： 此方法依赖于 ID 的唯一性。确保页面上所有 li 元素的 ID 都是唯一的，否则可能会导致意外的结果。
• 性能优化： 如果页面上有大量的 li 元素，频繁的 querySelectorAll 操作可能会影响性能。可以考虑使用事件委托等技术进行优化。
• 适用场景： 此方法适用于 ID 动态生成且事先未知的情况。如果 ID 是静态的，可以使用 CSS :hover 伪类和相邻兄弟选择器等方法来实现类似的效果，性能更高。

总结

本文介绍了如何使用 JavaScript 实现当鼠标悬停在一个 div.first 中的 li 元素上时，为 div.second 中具有相同 ID 的 li 元素添加 .active 类。该方案适用于 ID 动态生成且事先未知的情况，并提供了详细的代码示例和注意事项。希望本文能够帮助读者更好地理解和应用 JavaScript 技术。