本文介绍如何使用 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 代码实现：
立即学习“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 类下的 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 技术。
