Question

我被引用为Highlight all elements with same class when one of them is moused over

我想知道的是-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>

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无法选择先前元素here

的更多信息

悬停它们时如何突出显示所有匹配的元素？

1 个答案: