如何用纯CSS实现鼠标悬停时同类别兄弟元素样式同步变更

要实现悬停任意同色行时所有同色行同步高亮，核心思路是利用父容器的hover状态批量控制子元素——因为CSS没有父选择器，无法直接通过子元素的hover反向控制其他兄弟元素，但可以借助父容器的hover状态间接实现。

步骤1：调整HTML结构，分组同色系行 #

把所有红色行和蓝色行分别放到独立容器中，让同色系元素共享同一个父节点：

<body>
  <div class="color-group red-group">
    <p class="red-row">Red Row</p>
    <p class="red-row">Red Row</p>
    <p class="red-row">Red Row</p>
  </div>
  <div class="color-group blue-group">
    <p class="blue-row">Blue Row</p>
    <p class="blue-row">Blue Row</p>
    <p class="blue-row">Blue Row</p>
  </div>
</body>

步骤2：编写CSS规则 #

当鼠标悬停在任意子元素上时，父容器会同步触发hover状态，此时给容器内所有同色系行设置高亮样式：

/* 红色组批量高亮 */
.red-group:hover .red-row {
  background-color: red;
}

/* 蓝色组批量高亮 */
.blue-group:hover .blue-row {
  background-color: blue;
}

/* 可选：添加过渡动画，让高亮效果更平滑 */
.red-row, .blue-row {
  transition: background-color 0.2s ease;
  padding: 8px; /* 可选：增加内边距，提升交互体验 */
}

原理说明 #

当鼠标悬停在某一行上时，它的父容器（比如.red-group）会自动进入hover状态，此时CSS规则会选中容器内所有.red-row元素，统一设置背景色，从而实现“悬停任意同色行，所有同色行同步高亮”的效果。

如果不允许修改HTML结构，纯靠现有平级结构无法完美实现（因为CSS不支持前向选择器，只能控制hover元素及之后的兄弟元素，无法影响前面的元素），因此添加分组容器是最稳妥的纯CSS解决方案。

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