将：hover应用于所有相等的类 修复

如何解决将：hover应用于所有相等的类 修复

我有多个具有相同类'color-hover'的div，我希望当一个div悬停时，所有div的颜色都会改变。

我已经对以下内容进行了编码，但仅对已更改的颜色进行了编码：

.color-hover {
 color: red;
}

.color-hover:hover {
 color: blue
}

也尝试过

.color-hover {
 color: red;
}

.color-hover:hover .color-hover {
 color: blue
}

想法？

解决方法

一种解决方法是将:hover放在父项上，而不是.color-hover本身。

但是所有.color-hover都必须放在同一个容器中，它也会在将父对象的空白区域悬停时触发

修复

如04FS所述，可以通过向父级添加pointer-events: none并将其还原为子级来解决此问题。

.container {
  pointer-events: none;
}

.color-hover {
  color: red;
  pointer-events: all;
}

.container:hover > .color-hover {
  color: blue;
}

<div class="container">
  <span class="color-hover">Lorum ipsum</span>
  <span class="color-hover">Lorum ipsum</span>
  <span class="color-hover">Lorum ipsum</span>
  <span class="color-hover">Lorum ipsum</span>
  <span class="color-hover">Lorum ipsum</span>
  <span class="color-hover">Lorum ipsum</span>
  <span class="color-hover">Lorum ipsum</span>
</div>

---

将来CSS4推出时，您可以通过:has()伪类实现此目标

*:has(> .color-hover:hover) .color-hover {
  color: blue;
}