Как заставить меняться заливку div в зависимости от положения курсора?

Question

[NOTacoder]

Добрый день. Задача такая: на странице должна быть картинка с квадратом (чёрный контур, плоская заливка), цвет его должен меняться в зависимости от положения курсора (т.е курсор ездит – цвет меняется, курсор на месте – цвет не меняется; конкретные цвета не имеют значения, главное – сам процесс).
Реально ли сделать это при помощи только css?

UPD цвета внутри квадрата должны меняться всегда, не только когда курсор внутри квадрата.

Answer 1

[Alexander Pushkarev]

Только про помощи css - нет. А вот небольшой JS скрипт вполне справится с этим

Comments

[NOTacoder]

понятно, спасибо.

Answer 2

[Ankhena]

https://jsfiddle.net/9v220k7r/

Comments

[Сергей Тутуков]

Хорошее решение, но есть минус. Если контейнер больших размеров, то не правильно будет цвет высчитываться. Например, контейнер 500px шириной x будет равен 227, когда максимум ff.

Вот решение, с учетом этих правок.
https://codepen.io/STutukov/pen/JWwOgo?editors=1010

[Ankhena]

Сергей Тутуков: Нет описания по каком принципу его вообще надо менять. Написала направление мысли.

[NOTacoder]

Ankhena W: спасибо!

только в вопросе речь о положении курсора на странице везде, а не только внутри контейнера...
(добавила апдейт)
буду разбираться!

[Ankhena]

NOTacoder: какая разница, по большому счету? Алгоритм только придумайте, потому что у цвета максимум 255 или FF, а экран существенно больше.