CSS 实现多组兄弟元素悬停高亮的自动化方案

本文介绍如何用纯 CSS 的 :has() 伪类配合 JavaScript 动态生成选择器高效实现数百个分组内所有同组元素的统一悬停高亮避免重复书写 300 条 CSS 规则。 本文介绍如何用纯 css 的 :has() 伪类配合 javascript 动态生成选择器高效实现数百个分组内所有同组元素的统一悬停高亮避免重复书写 300 条 css 规则。在现代前端开发中我们常需实现“悬停任一子项高亮整个逻辑分组”的交互效果。例如页面包含 300 组、每组 3 行 p 元素分别标记为 group-1、group-2 … group-300。理想行为是——当鼠标移入任意一个 group-15 元素时该组全部 3 个元素同时变为蓝色背景。纯 CSS 本身无法自动泛化匹配如 :has(.group-*:hover) 不合法但借助 CSS :has()已获 Chrome 105、Firefox 121、Safari 15.4 原生支持与轻量级 JavaScript 初始化脚本可完全避免手写数百条重复规则实现可扩展、可维护、零运行时开销的解决方案。? 核心思路动态生成 .parent:has(.group-X:hover) .group-X 规则利用 :has() 的父容器感知能力我们只需为每个唯一 class 名生成一条 CSS 规则。以下为生产就绪的实现代码 Mokker AI AI产品图添加背景