CSS 混合混合模式 + JS

Question

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

有什么解决办法吗？我尝试改变“H”的颜色和“O”在 mouseenter/mouseleave 上，但它没有按预期工作。

const cursor = document.querySelector('.cursor')

const wuc = document.querySelectorAll('.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'

    })

})

body {

    background-color: #fff;

    color: #fff;

}

.cursor {

    width: 5vw;

    height: 5vw;

    transform: translate(-2.5vw, -2.5vw);

    position: fixed;

    transition-duration: 200ms;

    transition-timing-function: ease-out;

    background-color: #000;

    border-radius: 50%;

    mix-blend-mode: difference;

}

p {

    margin-left: 30vw;

    margin-top: 40vh;

}

.wuc {

    color: #000;

}

 <div class="cursor"></div>

    <p class="container">

       <span class="wuc">H</span>ELL<span class="wuc">O</span>

    </p>

Answer 1

我将使用与自定义光标相同位置的 radial-gradient 为文本着色const cursor = document.querySelector('.cursor')document.addEventListener('mousemove', e => {&nbsp; cursor.setAttribute('style', 'top: ' + e.clientY + 'px; left: ' + e.clientX + 'px;');&nbsp; document.body.setAttribute('style', '--x: ' + e.clientX + 'px;--y:' + e.clientY + 'px;');})body {&nbsp; background-color: #fff;&nbsp; color: #fff;}.cursor {&nbsp; width: 5vw;&nbsp; height: 5vw;&nbsp; transform: translate(-2.5vw, -2.5vw);&nbsp; position: fixed;&nbsp; transition-duration: 200ms;&nbsp; transition-timing-function: ease-out;&nbsp; background-color: #000;&nbsp; border-radius: 50%;&nbsp; mix-blend-mode: difference;}p {&nbsp; margin-left: 30vw;&nbsp; margin-top: 40vh;}.wuc {&nbsp; background:&nbsp;&nbsp; &nbsp; radial-gradient(farthest-side, #fff 99.5%, #000 100%) calc(var(--x,0px) - 2.5vw) calc(var(--y,0px) - 2.5vw)/5vw 5vw fixed no-repeat,&nbsp; &nbsp; #000;&nbsp; -webkit-background-clip:text;&nbsp; background-clip:text;&nbsp; -webkit-text-fill-color: transparent;&nbsp; color:transparent;&nbsp;&nbsp;}<div class="cursor"></div><p class="container">&nbsp; <span class="wuc">H</span>ELL<span class="wuc">O</span></p>