@SavelyKalinov

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

Возникла задача с изменением цвета курсора при перемещении по блокам сайта. Нашлось решение, указанное в коде, 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
Скрин как это должно выглядеть:
H095L.png
URVcN.png
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы