使用 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

结果：

当您将鼠标悬停在“WORK”文本上时，黑色文本将逐渐过渡为白色随着鼠标光标的移动。