如何用原生JavaScript实现高亮文本与对应注释的联动悬停效果？

方案1：用CSS :has() 伪类 + 自定义数据属性关联 #

这是最接近你说的「类似for属性绑定」的方式，不需要任何JS事件监听，完全靠CSS实现关联高亮。

给高亮内容和对应的注释加上相同的data-highlight-id属性，用来标识它们是一组关联元素：

<p>
  这是一段包含<span class="highlight" data-highlight-id="1">高亮字词</span>的段落，
  旁边的<span class="note" data-highlight-id="1">注释内容</span>会和它联动。
</p>

然后写CSS规则，当悬停任意一个带该属性的元素时，所有同ID的元素都触发强调样式：

/* 基础样式 */
.highlight, .note {
  transition: background-color 0.2s ease;
}

/* 悬停时的强调效果 */
[data-highlight-id]:hover,
:has([data-highlight-id]:hover) [data-highlight-id] {
  background-color: #fff3cd;
  font-weight: 600;
}

:has()伪类会检测父级或同级中是否有悬停的目标元素，从而让所有关联的data-highlight-id元素同步高亮。目前主流浏览器（Chrome、Edge、Safari 15.4+）都支持这个特性。

方案2：父容器包裹实现联动（兼容性更好） #

如果需要兼容不支持:has()的旧浏览器，可以把每组高亮内容和注释放在同一个父容器里，通过悬停父容器来触发子元素的样式变化：

<div class="highlight-group">
  <span class="highlight">高亮句子</span>
  <span class="note">对应的注释</span>
</div>

CSS规则更简单：

.highlight-group:hover .highlight,
.highlight-group:hover .note {
  background-color: #e3f2fd;
  border-radius: 3px;
}

这种方式完全兼容所有现代浏览器，结构清晰，实现成本极低，适合结构集中的场景。

对比你当前的JS方案 #

这两种CSS方案都不需要编写onMouseEnter/onMouseLeave事件监听，也不用手动添加/移除.hover类，完全靠CSS的选择器逻辑实现联动，代码更简洁，性能也更好，完美替代你现在的实现方式。

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