Изменение стандартного курсора, изменение цвета курсора?

Question

[Savely Kalinov]

Возникла задача с изменением цвета курсора при перемещении по блокам сайта. Нашлось решение, указанное в коде, mix-blend-mode:difference. Курсор плавно меняет цвет при переходе из одного блока в другой, но при этом реагирует и на наведение на текст и картинки, как исключить эти объекты для объединения mix-blend-mode?

const cursor = document.querySelector('.cursor')
document.addEventListener('mousemove', (e) => {
  cursor.setAttribute("style","top: "+(e.pageY)+"px; left: "+ (e.pageX) +"px;")
})

document.addEventListener("click", (e) => {
  console.log(e.target)
  cursor.classList.add('click')

  setTimeout(()=>{
    cursor.classList.remove('click')
  },500)
})

.cursor {
      position: absolute;
      background-color: #ec5540;
      width: 20px;
      height: 20px;
      z-index: 9999;
      border-radius: 50%;
      mix-blend-mode: difference;
    }

Как вы считаете, как лучше реализовать изменение курсора, не используя подмену символом и mix-blend-mode?
Код: https://codepen.io/nstsvs/pen/GRNrEZm
Скрин как это должно выглядеть:

Comments

[Вадим]

На скорую руку набросал примерно следующее:

document.addEventListener('mousemove', (e) => {
  if(e.path[0].classList.contains('block')){
    cursor.classList.add('blendD')
  } else {
    cursor.classList.remove('blendD')
  }
  cursor.setAttribute("style","top: "+(e.pageY)+"px; left: "+ (e.pageX) +"px;")
})

Ну и вынес микс бленд мод в отдельный css класс.
У этого решения, есть, как минимум, 2 косяка.
1) Сущесвенный - path в event может не везде быть реализовано.
2) Реальный курсор может быть не на тексте, а кружок на тексте, из-за чего текст всё же будет немного миксоваться

В связи с этим не предлагаю как решение, но как направление мысли - сойдёт