Hover по элементу-эффект на соседнем: почему в одном случае работает, а в другом нет?

Question

[lagudal]

Кажется туплю, но не могу понять в чем.
Есть такая несложная конструкция. Хочу реализовать так, чтобы по ховеру на элемент эффект был у этого элемента и у соседа справа или слева.
Так вот, как видно, hover по левым элементам нормально срабатывает на правых, а вот hover по правым элементам на левые не влияет.
Где ошибка?

Answer 1

[Петр Васильев]

Может это связано с тем что соседний селектор + работает только вниз. Т.е. не действует на предыдущий перед активным

Comments

[lagudal]

Обмануть никак? необязательно именно как я реализовал через смещение бэкграунда, может как то по другому смену цветов можно придумать?

[Петр Васильев]

Обмануть движок рендеринга ?

[lagudal]

нагуглил, что вроде бы с помощью order у flexbox и grid можно имитировать предыдущий селектор. Пока не пробовал, завтра уже...

[Петр Васильев]

lagudal, используйте jquery, не насилуйте нервную систему

Answer 2

[MrStan1slav]

Потому что селектор + влияет только на элемент, идущий следующим по дереву, а на предыдущий элемент нет. Тут проще всего использовать JS.

Comments

[lagudal]

ясно. А есть где пример подобной реализации?

Answer 3

[Алексей Уколов]

Плюс - это селектор следующего элемента. Селектора предыдущего элемента в css пока нет, но при вашей структуре можно использовать селектор соседних элементов:
.item-2:hover ~ .item-1, .item-4:hover ~ .item-3

Comments

[lagudal]

жаль, но не работает (
элементов будет по 2 в строке

[Алексей Уколов]

Я класс в селекторе неправильно изначально написал.
Не знаю какой результат должен быть в точности, но, вроде, всё работает: https://codepen.io/alexey-m-ukolov/pen/zJGmdz

Уникальные классы можно заменить на селекторы nth-of-type, как видите, что несколько упрощает код.

[lagudal]

я хотел бы добиться, чтобы по наведению по правым элементам, в левых тоже срабатывало бы смещение фона, как это работает с правыми элементами если навести по левым. Т.е. изначально - цвет 1 и 4 элементов зеленый, 2-го и 3-го синий. По hover по любому этот цвет плавно изменяется на противоположный у этого и соседнего элемента. Ну для разнообразия - один раз фон смещается вправо, один раз влево, в зависимости от стороны элемента наведения.
Сейчас это сработывает одинаково как в случае с плюсом, так и с тильдой.

[Алексей Уколов]

Я ошибся, тильда тоже работает только вправо, предыдущие элементы она выбирать не умеет.