使用 J*aScript 根据 ID 匹配不同父元素中的元素（悬停时）

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 J*aScript 根据 ID 匹配不同父元素中的元素（悬停时）

2025-10-17

浏览次数：次

返回列表

使用 JavaScript 根据 ID 匹配不同父元素中的元素（悬停时）

本文将介绍如何使用 j*ascript 在鼠标悬停时，根据 id 匹配不同父元素中的元素，并动态添加或移除 `active` 类。通过遍历第一个父元素中的 `li` 元素，并监听 `mouseover` 和 `mouseout` 事件，我们可以获取当前悬停元素的 id，然后在第二个父元素中找到具有相同 id 的元素，并对其进行样式操作。

J*aScript 实现跨父元素 ID 匹配与样式控制

在 Web 开发中，有时我们需要实现一种交互效果：当鼠标悬停在一个元素上时，另一个元素（可能位于不同的父元素下）也随之改变样式。如果这些元素具有相同的 ID，我们可以利用 J*aScript 来实现这种效果。

实现原理

该方案的核心思想是：

选取第一个父元素（例如，class 为 first 的 div）下的所有 li 元素。
为每个 li 元素添加 mouseover 和 mouseout 事件监听器。
当 mouseover 事件触发时，获取当前 li 元素的 ID。
使用该 ID 作为选择器，在整个文档中查找第二个具有相同 ID 的元素（例如，class 为 second 的 div 下的 li 元素）。
为找到的第二个元素添加 active 类，从而改变其样式。
当 mouseout 事件触发时，移除第二个元素的 active 类，恢复其原始样式。

代码示例

以下是实现上述功能的 J*aScript 代码：

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");
  });
});

代码解释

document.querySelectorAll(".first ul li"): 使用 querySelectorAll 方法选取所有位于 class 为 first 的元素下的 ul 元素内的 li 元素。
.forEach(li => { ... }): 遍历选取的每个 li 元素，并为每个元素执行回调函数。
li.addEventListener("mouseover", e => { ... }): 为每个 li 元素添加 mouseover 事件监听器。当鼠标悬停在该元素上时，触发回调函数。
e.target.id: 在 mouseover 事件中，e.target 指向触发事件的元素（即当前悬停的 li 元素），e.target.id 获取该元素的 ID。
document.querySelectorAll(\#${e.target.id}`)[1]: 使用querySelectorAll选取 ID 与当前悬停元素 ID 相同的元素。由于第一个元素已经被选取，所以使用索引[1]` 来获取第二个元素。
.classList.add("active"): 为选取的第二个元素添加 active 类。
li.addEventListener("mouseout", e => { ... }): 为每个 li 元素添加 mouseout 事件监听器。当鼠标移出该元素时，触发回调函数。
.classList.remove("active"): 移除选取的第二个元素的 active 类。

HTML 结构

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

为了使上述 J*aScript 代码正常工作，HTML 结构应如下所示：

<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>

CSS 样式

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

.active {
  background: #CCC;
}

注意事项

确保两个父元素下的 li 元素具有相同的 ID，这是实现匹配的关键。
该方法依赖于元素的 ID 属性，如果 ID 不存在或不唯一，可能会导致错误。
如果需要匹配的元素不是 li 元素，需要相应地修改 J*aScript 代码中的选择器。
此代码假设页面上只有两组具有相同 ID 的元素。如果存在更多组，则需要修改代码以确保选择正确的元素。

总结

通过 J*aScript 结合 CSS，我们可以轻松实现跨父元素 ID 匹配与样式控制。这种方法在需要实现复杂的交互效果时非常有用，例如，当鼠标悬停在一个导航菜单项上时，高亮显示内容区域中对应的部分。

以上就是使用 J*aScript 根据 ID 匹配不同父元素中的元素（悬停时）的详细内容，更多请关注其它相关文章！

# 上时 # 苏州网站建设网站推广 # 如何seo零金手指六六二一 # 盘锦网站推广巍星hfqjwl下拉 # 个人推广网站app # 网站搜索引擎优化措施 # 轻食推广营销策划方案 # 网站排名优化价格怎么做 # 安康建设公司网站 # 盛大网站建设美丽 # 滁州网站建设详细方案 # 单选框 # 遍历 # 移除 # css # 选择器 # 当鼠标 # 第一个 # 表单 # 回调 # 第二个 # ssl # 回调函数 # seo # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：怎么在HTML中插入进度加载动画_HTML CSS旋转动画与加载效果

下一篇：J*aScript数据结构与算法实现

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 J*aScript 根据 ID 匹配不同父元素中的元素（悬停时）

J*aScript 实现跨父元素 ID 匹配与样式控制