CSS Selettore per Child of Sibling Element

Question

Se ho ottenuto questo:

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

C'è un selettore per afferrare #cambio quando #trigger si librava sopra?

Come al passaggio del mouse su #trigger, cambia lo sfondo dell'elemento #change di .sibling.

Sto cercando una soluzione CSS pura senza javascript.

Answer 1

In una parola: no.

Data la struttura corrente del tuo HTML (e lo stato corrente dei selettori CSS), questo non è possibile. Forse avremo qualcosa di simile in CSS4, ma il traversal come questo è meglio lasciato a Javascript.

È possibile, ovviamente, ristrutturare la vostra markup, e utilizzare il selettore di pari livello:

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

No. Non è possibile ottenere questo utilizzando solo CSS. Javascript è una buona opzione in questo caso ..

Si può tuttavia rilevare la .parent essere aleggiava (che risolverà il problema se il genitore circonda esattamente il grilletto):

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

(markup rimane lo stesso jsFiddle)