Как выделить все совпадающие элементы при наведении на каждый из них? - PullRequest
Новая
       15

Как выделить все совпадающие элементы при наведении на каждый из них?

3 голосов
/ 20 июня 2019

На меня ссылаются Выделите все элементы одного и того же класса, когда один из них наведен на

Я хотел бы узнать, возможно ли это с помощью 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>

1 Ответ

0 голосов
/ 20 июня 2019

Насколько я знаю, это невозможно, потому что 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 не может выбрать предыдущие элементы здесь

...