Как при наведениее на ссылку поменять цвет другого элемента?

Question

[Vlad_beg]

Как правильно при наведении на ссылку поменять цвет класса ".par"?
И что в моем варианте не так?

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
</ul>

<p class="par">Text</p>

li > a:hover + .par {
	color:red;
}

Answer 1

[Stalker_RED]

Почитайте как работает знак + в селекторе. https://www.w3.org/TR/CSS21/selector.html#adjacent...
Он действует на соседний элемент, а у вас вокруг ссылки еще li и ul обернуты.

Вот так сработает:

<a href="#">Link 1</a>
<p class="par">Text</p>

a:hover + .par {
  color:red;
}

Answer 2

[Дмитрий Пыркин]

JS в помощь

Comments

[Vlad_beg]

Меня интересует, как это сделать с помощью css

[Stalker_RED]

Vlad_beg: в вашем примере - никак.

[Vlad_beg]

Stalker_RED: не подскажите, почему при ul:hover работает но на его вложенные теги нет?

[Stalker_RED]

Vlad_beg: потому что ul - это сосед p, а ссылка - нет.

Answer 3

[Александр K]

В данном случае, для p.par соседним селектором является только ul.
Поэтому пробуйте:
ul:hover + .par {
color:red;
}