如何使用 CSS 和 JavaScript 创建鼠标悬停时的反转文本颜色效果？

反转鼠标悬停时的文本颜色

目标是用黑色光标悬停在文本元素上时反转文本元素的颜色。效果应类似于以下 GIF：

[演示效果的 GIF]

要使用 CSS 和 JavaScript 实现此效果，我们将结合使用多种技术：

1. 创建复制文本图层：复制文本元素并将其直接放置在原始元素的顶部。将重复文本图层的颜色反转为白色。
2. 使用剪辑路径显示顶层：使用剪辑路径定义一个圆形区域，该区域将显示反转的文本图层.
3. 监听鼠标移动：当用户将光标移动到文本上时，调整剪辑路径的位置以匹配光标的移动。

这里是示例实现：

<code class="javascript">var h = document.querySelector('h1');
var p = h.getBoundingClientRect();
var c = document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  // Adjust the cursor position
  c.style.left = e.clientX + 'px';
  c.style.top = e.clientY + 'px';

  // Adjust the clip-path
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

<code class="css">body {
  cursor: none;
}

h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(20px at var(--x, -100%) var(--y, -100%));
}

.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: -2;
}</code>

<code class="html"><h1 data-text="WORK">WORK</h1>

<span class="cursor"></span></code>

通过结合这些技术，我们可以在鼠标悬停时创建所需的文本颜色反转效果。

以上是如何使用 CSS 和 JavaScript 创建鼠标悬停时的反转文本颜色效果？的详细内容。更多信息请关注PHP中文网其他相关文章！