How to highlight all matched elements when hover each of them?

user_10266361 0
Viewed 186

I am referenced with Highlight all elements with same class when one of them is moused over

The way I wanted to know is - Is it possible with CSS?

I am trying with sibling: ~ but it can't highlight previous sibling elements.

.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>

highlight css html
1 Answers

As far as i am aware this is not possible because CSS as of right now is unable to select any preceding elements, though you can achieve this kind of behaviour doing something like this:

.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>

You can read more about CSS being unable to select previous elements here

user_50632630
Related