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

Возникла задача с изменением цвета курсора при перемещении по блокам сайта. Нашлось решение, указанное в коде, 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)
})

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

Код: https://codepen.io/nstsvs/pen/GRNrEZm

Cкрин как это должно выглядеть.