Geschwister Hover via CSS funktioniert nicht - warum?

Question

Ich versuche, das Geschwister eines Elements zu manipulieren, indem ich sein Geschwisterelement schwebe. Ich mache es wie folgt aus:

.sw_2-technik + .sw_2-emotionen{ 
    background:green; 
} 

.sw_2-emotionen:hover ~ .sw_2-technik{ 
    background:orange; 
} 

Während die HTML-Struktur ein bisschen wie das ist:

<section class="wrapper"> 
<div class="sw_2-technik"></div> 
<div class="sw_2-emotionen"></div> 
</section> 

Während die erste Operation gut funktioniert, die zweite (.sw_2-emotionen: Hover ~ .sw_2 (Technik) macht nichts. Was mache ich da falsch?

Danke!

Answer 1

Geschwisterselektoren beeinflussen nur Elemente, wenn die zweite nach der ersten auf der Seite kommt - nicht umgekehrt.

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Die ~ Kombinator trennt zwei Selektoren und entspricht das zweite Element nur, wenn es durch die ersten vorangestellt ist, und beide einen gemeinsamen Elternteil.