1

Kак изменить цвет букв при наведении мыши с помощью js. Есть пример картинкавведите сюда описание изображения

Вот код который есть.

document.onmousemove = function() {
  document.getElementsByTagName('body')[0].insertAdjacentHTML('beforeEnd', '<div id="cat"></div>');
  var cat = document.getElementById('cat');
  cat.style.position = 'fixed';

  document.onmousemove = function(event) {
    cat.style.left = event.clientX + -50 + 'px';
    cat.style.top = event.clientY + -50 + 'px';

  }

}
#cat {
  width: 100px;
  height: 100px;
  background-color: #F89C24;
  border-radius: 50%;
  mix-blend-mode: color-burn;
}
<p class="qq">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, ipsum cupiditate. Beatae quas, aliquid sunt voluptas? Distinctio voluptates molestias quam sint quas voluptate. Animi velit sint tempora et, recusandae iure a aliquam numquam libero praesentium
  doloremque ab dolor soluta. Voluptatum, cupiditate iure tenetur itaque, illum molestiae minima atque repudiandae quidem? Reprehenderit enim hic dolorum consequatur perspiciatis quia officia id tempora ab ipsa, aspernatur autem atque voluptatem iure
  fuga obcaecati eveniet itaque nobis eaque adipisci veritatis soluta placeat? Ut sed, maxime molestiae in iure blanditiis velit culpa excepturi placeat adipisci totam, vitae molestias repellendus corporis recusandae perspiciatis doloremque hic. Consequuntur
  adipisci qui praesentium at quasi dolores tenetur quisquam eaque ad, totam blanditiis repellendus vitae sapiente, aut, laudantium nulla dolorem ea provident eum rem maiores beatae porro atque odit! Consequuntur et molestias sed, assumenda unde neque
  voluptatibus rerum officiis, dolore suscipit saepe ad. Sint tenetur odit odio, expedita iure doloremque eius provident! Delectus aut totam, ad aliquam voluptatum excepturi nesciunt, eum ab, incidunt tenetur repellendus deserunt officiis maxime, numquam
  nemo maiores? Repudiandae, obcaecati deserunt dolores fugiat. Temporibus quam quod quibusdam blanditiis? Voluptate laborum incidunt tenetur in maxime ipsa, suscipit mollitia veniam cupiditate vitae saepe placeat labore quo adipisci dolores sint laudantium
  facilis!
</p>

1
  • и не надо добавлять слушатель в слушателе 11 окт 2019 в 18:49

1 ответ 1

2

Черный инвертировать оказалось не так просто, но вот как-то так получилось:

document.onmousemove = function (event) {
  document.body.style.setProperty('--x', event.clientX);
  document.body.style.setProperty('--y', event.clientY);
}
body {
  --x:-100;
}

#cat1 {
    background-color: rgb(7, 99, 219);
}

p {
   font-size: 50px;
   mix-blend-mode: multiply;
}

#cat2 {
    background-color: white;
    mix-blend-mode: difference; 
    transform:scale(1.006);
}

.cat {
    border-radius: 50%;
    position:fixed;    
    width: 100px;
    height: 100px;
    top:calc(calc(var(--y) * 1px) - 50px);
    left:calc(calc(var(--x) * 1px) - 50px);
}
<div id="cat1" class=cat></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, ipsum cupiditate. Beatae quas, aliquid sunt voluptas?</p>
<div id="cat2" class=cat></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.