如何让列表中多个非连续链接元素在hover时同步高亮？

首先需要修正你提供的HTML代码，原代码存在标签闭合错误，会导致浏览器解析异常，修正后的代码如下：

<ol>
  <li><a href="http://linkA.com">one</a></li>
  <li><a href="http://linkA.com">two</a></li>
  <li><a href="http://linkB.com">three</a></li>
  <li>four</li>
  <li><a href="http://linkB.com">five</a></li>
  <li>six</li>
</ol>

针对你的需求——hover任意元素时，相同关联的非连续元素同步高亮，有两种可行方案：

方案一：纯CSS（借助:has选择器） #

利用CSS的:has选择器检测父容器内是否有指定hover状态的元素，从而批量高亮同组元素，目前主流浏览器（Chrome、Firefox 121+、Safari）均支持该选择器：

/* 处理linkA组（one、two）的同步高亮 */
ol:has(a[href="http://linkA.com"]:hover) a[href="http://linkA.com"],
a[href="http://linkA.com"]:hover {
  background-color: yellow;
}

/* 处理linkB组（three、five）的同步高亮 */
ol:has(a[href="http://linkB.com"]:hover) a[href="http://linkB.com"],
a[href="http://linkB.com"]:hover {
  background-color: yellow;
}

方案二：JavaScript（兼容性更好） #

如果需要兼容不支持:has选择器的旧版浏览器，可通过JS监听hover事件，批量控制同组元素的高亮状态：

第一步：添加CSS高亮类 #

.highlight {
  background-color: yellow;
}

第二步：编写JS逻辑 #

// 获取所有列表内的链接元素
const links = document.querySelectorAll('ol a');

// 为每个链接绑定鼠标进入事件
links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    const targetHref = link.getAttribute('href');
    // 给所有相同href的链接添加高亮类
    document.querySelectorAll(`ol a[href="${targetHref}"]`).forEach(item => {
      item.classList.add('highlight');
    });
  });

  // 为每个链接绑定鼠标离开事件
  link.addEventListener('mouseleave', () => {
    const targetHref = link.getAttribute('href');
    // 移除所有相同href链接的高亮类
    document.querySelectorAll(`ol a[href="${targetHref}"]`).forEach(item => {
      item.classList.remove('highlight');
    });
  });
});

以上两种方案都能实现你要的效果：hover"one"或"two"时两者同步高亮，hover"three"或"five"时两者同步高亮。

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