CSS mix-blend-mode + JS

Question

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

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

 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

我将使用与您的自定义 cursor 相同的 position 的radial-gradient为文本着色

 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;'); })

 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 { background: 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, #000; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; color:transparent; }

 <div class="cursor"></div> <p class="container"> <span class="wuc">H</span>ELL<span class="wuc">O</span> </p>