Как менять бекграунд у фонового квадрата при наведении?

Question

[Павел]

Приветствую всех. Есть проблемка, мне нужно менять цвет у фонового квадрата при наведении на него.
Этого удалось добиться путём генерации квадратов и добавлении их в секцию в абсолюте. При этом контейнеру добавлен z-index выше, чем квадратам.
Естественно при наведении ничего не меняется, поэтому контейнеру пришлось добавить pointer-events: none.

Но мне хочется сохранить нативное поведение, чтобы текст можно было выделить...

Вот о чем речь (скриншот не снял мышку, она сейчас над текстом, в соответствующем квадрате)


Может подскажите, как ловить ховер мыши, на слое у которого z-index меньше (не думаю, что возможно :( )
Или другое решение, может есть библиотека какая, с помощью которой это можно сделать,
или у вас есть пример, как это реализовать (искал, ничего не нашёл)...

Заранее спасибо...
----------------------------------
Залил на кодепен
https://codepen.io/asokr/pen/ZEPdWxK

Comments

[YepBro]

На codepan покажи верстку. Через js точно можно сделать.

[Павел]

YepBro, Залил, https://codepen.io/asokr/pen/ZEPdWxK

Я понимаю, что можно...идею бы...:)

[YepBro]

Павел, я правильно понял, что надо менять фон красного прямоугольника?

[YepBro]

Павел, или квадраты должны быть под текстом и у них меняться фон по hover (.square)?

[Павел]

YepBro, Конечно, там всё работает как мне нужно, только текст не выделяется, а без pointer: none, текст выделяется, но hover не будет работать...

Answer 1

[Руслан Аксёнов]

Думаю квадрат нужно поместить внутрь блока с текстом, чтобы задействовать наведение родителя:
.container:hover .box {...}

Comments

[Павел]

Квадраты должны быть во всей секции.

Залил в песочницу, то, что имеем, и как должно быть, только нужно чтобы текст вел себя как текст...
https://codepen.io/asokr/pen/ZEPdWxK

Answer 2

[YepBro]

Пришлось подумать. Единственный вариант который сработал это следить за mousemove в родительском контейнере и динамически вычислять какой квадрат надо подсвечивать.

https://codepen.io/yepbro/pen/LYaKRPp