使用JS实现鼠标悬停时匹配不同父元素下同ID的<li>元素

问题说明 #

当鼠标悬停在.first容器内的<li>元素上时，需要为.second容器内具有相同ID的<li>元素添加.active类（例如悬停.first li#one时，给.second li#one添加.active类）。注意：ID为动态生成，无法提前获知。

对应的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方案说明 #

不存在纯CSS解决方案。CSS选择器无法实现基于动态ID跨容器的元素关联匹配，无法完成这类交互逻辑，必须借助JavaScript。

JavaScript解决方案 #

基于ID的实现思路 #

通过监听鼠标的mouseover和mouseout事件，获取当前悬停<li>的ID，再定位到.second容器中对应ID的元素，完成类的添加与移除：

// 遍历.first下的所有li元素
document.querySelectorAll('.first li').forEach(li => {
  // 鼠标悬停时添加active类
  li.addEventListener('mouseover', () => {
    const targetLi = document.querySelector(`.second li#${li.id}`);
    if (targetLi) targetLi.classList.add('active');
  });

  // 鼠标离开时移除active类
  li.addEventListener('mouseout', () => {
    const targetLi = document.querySelector(`.second li#${li.id}`);
    if (targetLi) targetLi.classList.remove('active');
  });
});

基于类的替代实现 #

（注：HTML规范中ID需唯一，重复ID属于不规范写法，推荐用类来关联配对元素）

document.querySelectorAll('.first li').forEach(li => {
  li.addEventListener('mouseover', e => {
    // 取第一个类名作为关联标识（需确保配对元素类名一致）
    const relateClass = e.target.classList.item(0);
    const targetLi = document.querySelector(`.second li.${relateClass}`);
    if (targetLi) targetLi.classList.add('active');
  });

  li.addEventListener('mouseout', e => {
    const relateClass = e.target.classList.item(0);
    const targetLi = document.querySelector(`.second li.${relateClass}`);
    if (targetLi) targetLi.classList.remove('active');
  });
});

内容的提问来源于stack exchange，提问作者Josh M