如何实现悬停某<td>时，所有包含相同内容的<td>均显示红色背景

实现方案 #

你当前使用的CSS规则td:hover只能匹配到当前被鼠标悬停的单个<td>元素，无法批量选中所有内容相同的<td>，需要配合JavaScript实现需求，修改后的代码如下：

调整后的CSS代码 #

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

/* 新增高亮类，替代原有的:hover规则 */
.highlight {
  background-color: red;
}

html {
  font-size: 24px;
}

新增JavaScript代码 #

直接把这段代码插入到页面</body>标签前即可：

// 获取页面所有td元素
const allTd = document.querySelectorAll('td');

allTd.forEach(td => {
  // 鼠标移入事件
  td.addEventListener('mouseenter', () => {
    // 拿到当前悬停td的文本内容，trim去除首尾空白避免匹配误差
    const currentText = td.textContent.trim();
    // 遍历所有td，匹配到相同内容就添加高亮类
    allTd.forEach(item => {
      if (item.textContent.trim() === currentText) {
        item.classList.add('highlight');
      }
    })
  })

  // 鼠标移出事件，清除所有高亮状态
  td.addEventListener('mouseleave', () => {
    allTd.forEach(item => item.classList.remove('highlight'))
  })
})

原有HTML代码不需要做修改，引入上述CSS和JS之后就能实现需求：悬停某个<td>时，所有内容完全相同的<td>都会同步变红，鼠标移出后自动恢复默认样式。

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