如何在鼠标悬停在匹配元素上时突出显示所有匹配元素？

Question

我参考了当鼠标悬停在一个元素上时，突出显示所有具有相同类的元素

我想知道的方法是 - 是否可以使用CSS来实现？

我正在尝试使用sibling: ~，但它无法突出显示前面的兄弟元素。

.test {
  color: blue;
}
.test:hover, .test:hover ~ .test {
  color: red;
  cursor: pointer;
}

<div>
  <span class="prev">Test Highlight by mouse over the `blue` texts: </span>
  <span class="test">This </span>
  <span class="test">Is </span>
  <span class="test">The </span>
  <span class="test">Highlight</span>
</div>

- Alona

---

这是不可能的，正如你所发现的那样——因为CSS选择器缺乏反向遍历级联的能力——无法使用CSS实现；但感谢你促使我更新一个我完全忘记了的答案。 - David Thomas

谢谢@DavidThomas，那么唯一的解决方案就是使用javascript，对吗？ - Alona

不幸的是，CSS选择器级别4提出了一个名为:has()的关系伪类（https://www.w3.org/TR/selectors-4/#relational），*可能*允许这样做，但似乎不太可能在Selectors level 4早期进入浏览器。 - David Thomas

Answer 1

据我所知，目前CSS无法选择任何先前的元素，因此这似乎是不可能的，但您可以通过以下方式实现这种行为：

.test {
  color: blue;
}
.x:hover .test {
  color: red;
  cursor: pointer;
}

<span class="prev">Test Highlight by mouse over the `blue` texts: </span>
<span class="x">
  <span class="test">This </span>
  <span class="test">Is </span>
  <span class="test">The </span>
  <span class="test">Highlight</span>
</span>

你可以在这里阅读更多关于CSS无法选择前面元素的内容。

- ivan

---

如果我可以将span包装在一个父元素中，那么我就不需要这个问题了。而且答案比你的简单得多 - x:hover { color: red; }。 - Alona

x:hover > span { color: red; }* 但是，这并不重要，因为它只是CSS或JS的一部分。 - ivan