См. детали. Как при наведении на 1 div изменять другой?

Question

[Bastax13]

В общем вот jsfiddle, почему .div1:hover ~ div2 { ... } работает, а .div2:hover ~ div1 { ... } нет?

div1 выше div2, у них один родитель

Answer 1

[Алмаз Бисенбаев]

Потому что "~" видит только тех сиблингов, которые находятся ниже первого. В CSS нет возможности выбрать сиблинга, стоящего выше, но есть различные лайфхаки. Хотя проще прибегнуть к js.

Comments

[Bastax13]

А можно ссылочку на лайфхаки? Уж очень не хочется на JS делать...

[Алмаз Бисенбаев]

Анатолий: Вот тут люди предложили несколько вариантов stackoverflow.com/questions/1817792/is-there-a-pre...

Answer 2

[Дмитрий]

Была такая же проблема. Мне посоветовали перевернуть в разметке блоки (т.е. 1 2 3 заменить на 3 2 1), а через flex-direction: column-reverse отобразить их в нормальном виде. Тогда все сработает. В вашем случае для этого способа придется сделать отдельный контейнер. Тыц