Html 如何在悬停时更改同级元素 CSS

发布于08月31日

在下面的示例中，当我们悬停一行时，它会改变 colored颜色 .理想情况下，当任何红色行悬停时，所有红色行都应该突出显示(蓝色行也是如此).

如何使用纯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()规则，因此，如果父项具有与悬停的类相同的子项，则具有相同类的所有其他子项将高亮显示.

Note::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>