Как поменять стили соседних объектов при наведении на один из них?

Question

[orionfalls]

Привет! Подскажите пожалуйста как реализовать такой функционал.
Есть сетка из объектов 6х16 (по сути кнопки)

нужно, чтобы при наведении на один из объектов свой стиль меняли все остальные, которые выше и левее выделенного (включая его самого). Попутно должен меняться текст справа, в зависимости от того, сколько объектов выделено. Возможно ли такое без js?

Comments

[Сергей delphinpro]

Возможно ли такое без js?

Есть у меня некоторые идейки по комбинации селекторов "~", "+", :nth
Плюс придется использовать флексы/гриды с реверсом или древний хак с rtl direction.
Интересная задачка.

Но в реальном проекте я бы не страдал фигней и запилил скриптами.

[orionfalls]

Сергей: Сложный ли скрипт будет? Просто человек, который все это делать будет с js знаком поверхностно. Ну отредактировать он вероятно сможет, а вот написать с нуля думаю вряд ли

[Андрей Токмаков]

orionfalls: Без скриптов текст менять не сможешь, ну если не раздувать сам html, до кучи блоков с всевозможными комбинациями текста и скрывая их

[Сергей delphinpro]

orionfalls: скрипт несложный. задача в принципе не специфичная, возможно есть готовые решения.

Answer 1

[Сергей delphinpro]

Со скриптом не подскажу, это не интересно.
А вот на "чистом" css поколдую =)

https://codepen.io/delphinpro/pen/vJrwzW?editors=1100

Disclaimer. Решение задачки чисто академическое. Не для практического использования.

Comments

[orionfalls]

Это выглядит так как я хотел, спасибо)

[Егор Живагин]

Жесть. Круто. Но всё равно жесть)