使用 CSS 和 JavaScript 反转鼠标悬停时的文本颜色
为了实现所需的悬停效果，其中黑色文本反转为白色，同时保持黑色光标的外观，我们可以将 CSS 剪辑路径的功能与 JavaScript 事件处理结合起来。
该方法包括创建两层文本：主文本层和反转文本层。倒置文本图层位于主文本图层后面，并将其文本颜色设置为白色。
使用 JavaScript，我们捕获鼠标移动并动态调整倒置文本图层的剪辑路径。当鼠标移动时，剪辑路径会进行调整以显示更多反转的文本，从而产生主要文本反转其颜色的错觉。
以下是关键代码组件的细分：
<code class="css">/* 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;
}</code><code class="javascript">// 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');
};</code>示例代码：
<code class="html"><h1 data-text="WORK">WORK</h1> <span class="cursor"></span></code>
结果：
当您将鼠标悬停在“WORK”文本上时，随着鼠标光标的移动，黑色文本会逐渐变成白色。
以上是如何使用 CSS 剪辑路径和 JavaScript 实现反转文本颜色悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！
