Селектор CSS для дочернего элемента Sibling

Если у меня есть это:

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
</div>
<div class="sibling">
    <div id="change">Hello</div>
</div>

Есть ли селектор для захвата #change, когда #trigger зависает?

Как и при зависании #trigger, измените фон элемента .sibling #change.

Я ищу чистое решение CSS без javascript.

Ответ 1

Словом: нет.

Учитывая текущую структуру вашего HTML (и текущего состояния селекторов CSS), это невозможно. Возможно, мы получим что-то подобное в CSS4, но обход таким образом лучше всего оставить в Javascript.

Вы можете, очевидно, перестроить свою разметку и использовать селектор sibling:

HTML

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
    <div class="sibling">
       <div id="change">Hello</div>
    </div>
</div>

CSS

#trigger:hover + .sibling #change {
  color:red; 
}

codepen

Ответ 2

Нет. Вы не можете достичь этого, используя только CSS. Javascript - хороший вариант в этом случае.

Тем не менее, вы можете обнаружить .parent, который будет зависеть (что решит вашу проблему, если родительский объект полностью окружит триггер):

.parent:hover + .sibling div#change{background:red;}

(разметка остается той же jsFiddle)