Получение позиции курсора мыши на чистом CSS

06.03.2021, Александр Мышов

Амит Шин рассказал о том, как получить позицию курсора мыши на чистом CSS — "How to Map Mouse Position in CSS".

Идея заключается в создании сетки элементов, в каждой ячейке которой задаются кастомные свойства с координатами:

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

Эти кастомные элементы затем можно использовать в любых свойствах, например, с их помощью сделать интерактивный динамический фон и т.п. Самый большой недостаток этого трюка — он не работает на мобильных устройствах.

https://css-tricks.com/how-to-map-mouse-position-in-css/