如何为CSS中的col元素应用:hover伪类？

先说结论 #

别折腾col:hover了——col是表格的结构元素，不处理任何鼠标交互事件，它只用来统一设置列的基础样式，实际操作中根本触发不了hover状态。DevTools里能强制生效是因为那是模拟样式，和真实用户操作不是一回事。

纯CSS解决方法（满足你的所有限制） #

利用单元格的hover事件，结合:has()选择器实现整列高亮，完全不用脚本，也不碰overflow:hidden：

/* 初始列背景（col正常生效） */
table colgroup col {
  background-color: #e6f2ff;
}

/* 第1列hover高亮：只要该列任意单元格被hover，整列变色 */
table:has(tr td:nth-child(1):hover) tr td:nth-child(1),
table:has(tr th:nth-child(1):hover) tr th:nth-child(1) {
  background-color: #ccccff;
}

/* 多列的话复制上面的代码，把nth-child里的数字改成对应列数就行 */
table:has(tr td:nth-child(2):hover) tr td:nth-child(2),
table:has(tr th:nth-child(2):hover) tr th:nth-child(2) {
  background-color: #ccccff;
}

方案细节

• :has()是CSS新特性，现在主流浏览器都支持，它能监听表格内某列单元格的hover状态，然后选中该列所有单元格，实现整列高亮的效果。
• 完全兼容你的粘性布局，不需要改任何表格的overflow设置。
• 纯CSS实现，没有脚本性能开销。

为什么之前的操作没用 #

• 把其他元素pointer-events设为none没用，因为col本身就不响应鼠标事件，就算其他元素事件被禁用，鼠标事件也不会落到col上。

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