Как можно изменить цвет фонового квадрата при наведении на него, учитывая, что контейнер имеет z-index выше, чем квадраты, и поэтому пришлось использовать pointer-events: none для них, что мешает выделению текста? Как можно сохранить нативное поведение, чтобы текст можно было выделять?
Для изменения фонового цвета квадрата при наведении на него курсора и при этом сохранения возможности выделения текста можно использовать следующий CSS:
```css
.square {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.3s;
}
.square:hover {
background-color: red;
}
```
Если pointer-events: none применяется к квадратам, которые находятся выше других элементов, то можно добавить следующие стили для контейнера, чтобы избежать конфликтов:
```css
.container {
position: relative;
z-index: 1;
}
.square {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.3s;
pointer-events: none; /* по-прежнему применяется для квадратов */
}
.container:hover .square {
background-color: red; /* изменение фона при наведении на контейнер */
pointer-events: auto; /* включение pointer-events для квадратов при наведении на контейнер */
}
```
Таким образом, при наведении на контейнер квадраты будут менять цвет фона, а при этом текст внутри квадратов останется выделяемым.
Думаю квадрат нужно поместить внутрь блока с текстом, чтобы задействовать наведение родителя:
.container:hover .box {...}