Инвертировать цвет текста при наведении курсора мыши с помощью CSS и JavaScript

Для достижения желаемого эффекта наведения, при котором черный текст инвертируется в белый, сохраняя при этом появления черного курсора, мы можем объединить возможности CSS-путей с обработкой событий JavaScript.

Подход состоит в создании двух слоев текста: основного текстового слоя и инвертированного текстового слоя. Инвертированный текстовый слой расположен позади основного текстового слоя, и его цвет текста установлен на белый.

Используя JavaScript, мы фиксируем движение мыши и динамически корректируем путь обрезки инвертированного текстового слоя. По мере перемещения мыши траектория клипа корректируется, чтобы показать большую часть инвертированного текста, создавая иллюзию основного текста, инвертирующего свой цвет.

Вот разбивка ключевых компонентов кода:

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

Пример кода:

WORK

Результат:

При наведении курсора на текст «РАБОТА» черный текст постепенно станет белым. при движении курсора мыши.