有没有办法在悬停时只为部分图像着色？

我想用HTML,CSS和jQuery编写简单的图像绘画.

假设我有一张原始图像,我想让它变成彩色但只是部分悬停(或10x10px正方形或光标所在的图像圈).

我应用了一些过滤器使其成为灰度级的CSS,但我不知道如何着色仅悬停部分(不是整个图片).

最佳结果的示例图像(保持彩色建议会很好,但不一定).

你可以用svg's mask和filter.

CodePen

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  document.getElementById('c').setAttribute('cx', e.clientX - img.getBoundingClientRect().left);
  document.getElementById('c').setAttribute('cy', e.clientY - img.getBoundingClientRect().top);
})