CSS целевой элемент 2 на 1: наведение и элемент 1 на 2: наведение

Question

Мне "нужно" нацелить другого родного брата каждого из двух элементов (на самом деле, детей родного брата) на: hover. Я могу заставить блок кода ниже работать, но я не могу заставить его работать наоборот. Я понимаю, что нет определенного метода нацеливания, подобного этому: ".element2:hover + .element1", но я действительно нашел это ( есть ли селектор CSS "предыдущий брат"?), У которого были некоторые творческие решения, включая RTL и некоторые хитрые: Идеи nth-child. Тем не менее, я все еще не мог найти пути ОБА, а просто переключать направления (мне нужны оба).

MARKUP:

<div class="element1">Element 1</div>
<div class="element2">
    <p class="child">
        <span class="grandchild">Element 2</span>
    </p>
    <p class="child2"></p>
</div>
<div class="element3">Element 3</div>

CSS:

.element1:hover + .element2 .child .grandchild { background-color: red; }

https://jsfiddle.net/macwise/6u3nj18m/

РЕДАКТИРОВАТЬ: я добавил третий корневой дочерний элемент (.element3), чтобы отразить реальный случай, с которым я работаю.

Обновление: возможно, мой язык "предыдущего брата" был расплывчатым и поэтому неправильно истолковывался как "родительский" ( есть ли родительский селектор CSS?). Ориентация на родителей, вероятно, также может предложить удовлетворительное решение, но мне технически необходимо нацелиться на "одного родного брата родителя, который предшествует другому родному брату того же родителя". Это проще, чем кажется.:) Надеюсь, что все проясняется.

Answer 1

Вы можете поймать зависание от родителя и вызвать его, как только вы наведете ребенка.

затем примените bg ко всем элементам div, но тот завис:

body div {
    pointer-events: auto;
}
body {
    pointer-events: none;
}
body:hover div {
    background: red;
}
body:hover div:hover {
    background: none;
}

<div class="element1">Element 1</div>
<div class="element2">
  <p class="child">
    <span class="grandchild">Element 2</span>
  </p>
  <p class="child2"></p>
</div>

Но это только для удовольствия, вы должны использовать JavaScript для этого.