Изменение одного блока при наведении на другой

.box{

cursor: pointer;

font-size: 24px;

display: block;

}

.box2{

color: blue;

font-size: 24px;

display: block;

}

.box:hover+.box2{

color: red;

font-size: 24px;

}

<p class="box">какой то текст</p>

<p class="box2">1000</p>

<div><p class="box">какой то текст</p></div>

<div><p class="box2">1000</p></div>

Вот как сделать что бы обернуты в дивы работали так же которые является соседними.

Добавьте блокам классы и отслеживайте hover уже на них.

Цитата:

---

Сообщение от Proger

Добавьте блокам классы и отслеживайте hover уже на них.

---

Так это тоже самое что и в параграфами, я имею виду в такой вложенности

Цитата:

---

Сообщение от sergei1980

я имею виду в такой вложенности

---

Нет, вложенность можно указать только для второго блока.

div:hover+div>.box2{}

Только вместо div нужно задавать классы.
А так, чтобы полностью цепочку выстроить от .box до .box2 не получится.

то есть это работает только на одном урвоне

И как сделать что бы на разных уровнях работало

На javascript отслеживать события мыши.

Спасибо