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

我想反转一个黑色文本，同时用自定义的黑色光标悬停它。 此GIF演示了以下效果：

我无法用CSS和JS来解决这个问题。我猜是混合模式、剪辑遮罩、伪元素和过滤器的一些组合

下面的代码使光标变为白色，但不使黑色文本变为白色。听起来很抽象？这是一个例子

---

//所有的信用都归https://murmure.me 下面是一个使用
剪辑路径
的想法。诀窍是复制文本，使其具有两层互上的不同文本颜色，然后我使用我随鼠标移动调整的
剪辑路径
显示顶部的一层


var h=document.querySelector（'h1'）；
var p=h.getBoundingClientRect（）；
var c=document.querySelector（'.cursor'）；
document.body.onmousemove=函数（e）{
/*调整光标位置*/
c、 style.left=e.clientX+'px'；
c、 style.top=e.clientY+'px'；
/*调整剪辑路径*/
h、 setProperty（'--x'，（e.clientX-p.top）+'px'）；
h、 setProperty（'-y'，（e.clientY-p.left）+'px'）；
}
正文{
光标：无；
}
h1{
颜色：#000；
显示：内联块；
利润率：50像素；
文本对齐：居中；
位置：相对位置；
}
h1：之前{
位置：绝对位置；
内容：attr（数据文本）；
颜色：#fff；
背景：#000；
剪辑路径：圆形（在-x-100%var（-y-100%）处为20px）；
}
.光标{
位置：固定；
宽度：40px；
高度：40px；
背景：#000；
边界半径：50%；
排名：0；
左：0；
转换：翻译（-50%，-50%）；
z指数：-2；
}
工作
使用
混合模式制作解决方案：差异.cursor
的code>

优点是——我们不需要将任何类或javascript添加到鼠标悬停的所有元素中

缺点是-此解决方案不太稳定，因为
mix-blend mode
是一种有点原始的技术。它需要在
body
和
html
中设置
height
，并为
body
设置严格的
背景色

带有
.cursor
CSS和JavaScript的部分-我部分借用了@Temani Afif的解决方案。谢谢你，希望你不介意，因为试图写得更好是没有意义的。但是我添加了
+window.scrollX
和
+window.scrollY
以获得正确的
。游标在滚动时起作用

有关混合模式的更多信息，请参见此处和


document.body.onmousemove=函数（e）{
document.documentElement.style.setProperty（'--x'，（e.clientX+window.scrollX）+'px'）；
document.documentElement.style.setProperty（'-y'，（e.clientY+window.scrollY）+'px'）；
}
html{
身高：100%；/*需要稳定的身高*/
}
身体{
最小高度：100%；/*需要“混合模式”*/
光标：无；
颜色：#000；
背景色：#fff；/*需要“混合模式”*/
}
.光标{
位置：绝对位置；
宽度：40px；
高度：40px；
背景：#fff；
边界半径：50%；
顶部：var（--y，0）；
左：var（--x，0）；
转换：翻译（-50%，-50%）；
z指数：2；
混合模式：差异化；
}
工作
非常感谢！在原始JS代码中，当光标被transform:matrix缩放和移动时，这是如何工作的@danoszz正如您在我的代码中看到的，光标和用于剪辑路径或径向渐变的圆具有相同的尺寸。。。因此，如果缩放圆环，则需要更改尺寸以使其匹配