在下面的示例中，当我们将鼠标悬停在一行上时，它会改变颜色。理想情况下，当任何红色行悬停时，所有红色行都应突出显示(蓝色行也是如此)。
如何用纯 CSS 实现这一点？
.red-row:hover {
background-color: red;
}
.blue-row:hover {
background-color: blue;
}<body>
<p class="red-row">Red Row</p>
<p class="red-row">Red Row</p>
<p class="red-row">Red Row</p>
<p class="blue-row">Blue Row</p>
<p class="blue-row">Blue Row</p>
<p class="blue-row">Blue Row</p>
</body>最佳答案
使用:has()规则在父级上，因此如果父级有一个具有相同类的子级悬停，则具有相同类的所有其他子级都会突出显示。
注意::has() Firefox 尚不支持。
.parent:has(.red-row:hover) .red-row {
background-color: red;
}
.parent:has(.blue-row:hover) .blue-row {
background-color: blue;
}<div class="parent">
<p class="red-row">Red Row</p>
<p class="blue-row">Blue Row</p>
<p class="red-row">Red Row</p>
<p class="blue-row">Blue Row</p>
<p class="red-row">Red Row</p>
<p class="blue-row">Blue Row</p>
</div>关于html - 如何在悬停时更改同级元素 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77010481/