Selektor CSS dla dziecka rodzeństwa Element

Question

Jeśli mam to:

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

Czy istnieje selektor chwycić #change gdy #trigger jest unosił się nad?

Podobnie jak po najechaniu #trigger, zmień tło #change elementu .sibling.

Szukam czystego rozwiązania CSS bez javascript.

Answer 1

Jednym słowem: nie.

Biorąc pod uwagę aktualną strukturę HTML (i aktualny stan selektorów CSS), nie jest to możliwe. Być może otrzymamy coś takiego w CSS4, ale takie przejście najlepiej pozostawić Javascriptowi.

Można oczywiście restrukturyzacji znaczników i użyj wybieraka rodzeństwa:

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

Answer 2

Nie. Nie można tego osiągnąć, używając tylko CSS. Javascript jest dobrym rozwiązaniem w tym przypadku ..

można jednak wykryć .parent jest unosił (który rozwiąże Twój problem jeśli rodzic otacza dokładnie spust):

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

(markup pozostaje ten sam jsFiddle)