Сибловский наклон через css не работает - почему?

Question

Я пытаюсь манипулировать родным братом элемента путем зависания его родственного элемента. Я делаю это так:

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

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

В то время как HTML-структура является своего рода как то:

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

Хотя первая операция работает хорошо, второй (.sw_2-emotionen: парить ~ .sw_2 -technik) ничего не делает. Что я там делаю?

Спасибо!

Answer 1

Селекторы сиблинга влияют только на элементы, когда второй приходит после первого на странице, а не наоборот.

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

Команда ~ комбинатор отделяет два селектора и соответствует второй элемент только если он предшествует первому, и оба имеют общую родителя.