本文将介绍如何使用 JavaScript 实现一个常见的交互效果：当鼠标悬停在一个区域的特定元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。我们将通过事件监听和 DOM操作，实现当鼠标悬停在 `.first` 区域的 `
实现原理
核心思路是通过 JavaScript 监听 .first 区域内 <li> 元素的 mouseover 和 mouseout 事件。当 mouseover 事件触发时，获取当前 <li> 元素的 ID，然后使用 querySelectorAll 查找所有具有相同 ID 的元素，并为第二个匹配到的元素（即 .second 区域内的元素）添加 .active 类。当 mouseout 事件触发时，执行相反的操作，移除 .active 类。
具体实现步骤
-
HTML 结构： 首先，我们需要定义 HTML 结构，包含两个区域 .first 和 .second，每个区域包含一个 <ul> 列表，列表中的 <li> 元素具有相同的 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> -
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 区域内所有的 <li> 元素。然后，使用 forEach 循环遍历这些元素，并为每个元素添加 mouseover 和 mouseout 事件监听器。
在 mouseover 事件处理函数中，e.target.id 获取当前 <li> 元素的 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 联动效果。
<!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 操作可能会影响性能。可以考虑使用事件委托或其他优化技巧。
- 可维护性： 为了提高代码的可维护性，可以将 JavaScript 代码封装成函数或模块。
总结
本文介绍了如何使用 JavaScript 实现 hover 联动效果，通过监听事件和 DOM 操作，实现了当鼠标悬停在一个区域的元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。这种方法适用于 ID 动态生成的情况，提供了一种灵活的解决方案。同时，也需要注意 ID 唯一性、性能优化和代码可维护性等方面的问题。
