本文将介绍如何使用 JavaScript 实现一个常见的交互效果：当鼠标悬停在一个区域的特定元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。我们将通过事件监听和 DOM操作，实现当鼠标悬停在 `.first` 区域的 `
实现原理
核心思路是通过 JavaScript 监听 .first 区域内
具体实现步骤
-
HTML 结构： 首先，我们需要定义 HTML 结构，包含两个区域 .first 和 .second，每个区域包含一个
- 列表，列表中的
- 元素具有相同的 ID。
- Lorem
- Ipsum
- Dolor
- Lorem
- Ipsum
- Dolor
-
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 区域内所有的
- 元素。然后，使用 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 类的样式，将背景色设置为灰色。
- 元素具有相同的 ID。
代码示例
将以上 HTML、JavaScript 和 CSS 代码整合在一起，即可实现完整的 hover 联动效果。
Hover 联动示例
- Lorem
- Ipsum
- Dolor
- Lorem
- Ipsum
- Dolor
注意事项
- ID 唯一性： 虽然本例中依赖 ID 进行匹配，但请确保页面中 ID 的唯一性，以避免潜在的问题。
- 性能优化： 如果列表数量非常大，频繁的 DOM 操作可能会影响性能。可以考虑使用事件委托或其他优化技巧。
- 可维护性： 为了提高代码的可维护性，可以将 JavaScript 代码封装成函数或模块。
总结
本文介绍了如何使用 JavaScript 实现 hover 联动效果，通过监听事件和 DOM 操作，实现了当鼠标悬停在一个区域的元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。这种方法适用于 ID 动态生成的情况，提供了一种灵活的解决方案。同时，也需要注意 ID 唯一性、性能优化和代码可维护性等方面的问题。
