Javascript CSS混合模式+；JS

因此，我有一个自定义js光标（鼠标光标后面有一个延迟），背景色为#000，混合模式设置为“差”。我的身体背景颜色和文字设置为#fff。现在，我有一个带有文本“HELLO”的p标签，我希望它只显示单词“H”和“O”，所以我创建了一个span，它的颜色设置为#000。当我将鼠标悬停在P标签上时，由于混合模式，我可以看到我想要的“ELL”单词，但是单词“H”和“O”变得“不可见”。当光标移到上面时，如何使它们可见？（如果光标未覆盖整个单词，则仅显示光标悬停的每个单词的一部分，而不是整个单词）

有什么解决办法吗？我试着改变mouseenter/mouseleave上“H”和“O”的颜色，但效果不理想

const cursor=document.querySelector（'.cursor'）
const wuc=document.queryselectoral（“.wuc”）
document.addEventListener（'mousemove'，e=>{
cursor.setAttribute（'style'，'top:'+e.clientY+'px；left:'+e.clientX+'px；'））
})
wuc.forEach（（wuc）=>{
wuc.addEventListener（'mouseenter'，（）=>{
wuc.style.color='#fff'
})
wuc.addEventListener（'mouseleave'，（）=>{
wuc.style.color='#000'
})
})

正文{
背景色：#fff；
颜色：#fff；
}
.光标{
宽度：5vw；
高度：5vw；
转换：转换（-2.5vw，-2.5vw）；
位置：固定；
过渡时间：200ms；
过渡定时功能：缓解；
背景色：#000；
边界半径：50%；
混合模式：差异化；
}
p{
左边距：30vw；
边际上限：40vh；
}
wuc先生{
颜色：#000；
}

你好

我会使用与自定义光标位置相同的

径向渐变来给文本上色


const cursor=document.querySelector（'.cursor'）
document.addEventListener（'mousemove'，e=>{
cursor.setAttribute（'style'，'top:'+e.clientY+'px；left:'+e.clientX+'px；'）；
document.body.setAttribute（'style'，'-x:'+e.clientX+'px；--y:'+e.clientY+'px；'）；
})
正文{
背景色：#fff；
颜色：#fff；
}
.光标{
宽度：5vw；
高度：5vw；
转换：转换（-2.5vw，-2.5vw）；
位置：固定；
过渡时间：200ms；
过渡定时功能：缓解；
背景色：#000；
边界半径：50%；
混合模式：差异化；
}
p{
左边距：30vw；
边际上限：40vh；
}
wuc先生{
背景：
径向梯度（最远侧，#fff 99.5%，#000 100%）计算值（var（-x，0px）-2.5vw）计算值（var（-y，0px）-2.5vw）/5vw 5vw固定无重复，
#000;
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
颜色：透明；
}


你好