如何使用剪辑路径反转鼠标悬停时的文本颜色？

鼠标悬停时反转文本颜色

该问题提出了一个场景，用户希望将鼠标悬停在黑色文本上时反转黑色文本的颜色使用自定义黑色光标，如提供的 GIF 所示。虽然用户尝试使用 CSS 和 JavaScript 创建此效果，但没有成功，代码仅将光标变成白色，但没有反转黑色文本。

解决方案

这里提供的解决方案采用了剪切路径的概念来达到预期的效果。它涉及复制文本以创建两层，一层包含黑色文本，另一层包含白色文本。通过使用 Clip-path 并根据光标的移动调整其位置，可以显示顶层，反转其下方文本的颜色。

以下代码演示了此解决方案：

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

在此代码中，h1 元素包含黑色文本及其下方带有白色文本的重复图层。顶层的剪辑路径根据光标的位置进行调整，显示下面的白色文本并有效反转黑色文本的颜色。

以上是如何使用剪辑路径反转鼠标悬停时的文本颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！