CSS mix-blend-mode + JS

Question

所以我有一个自定义的 js 光标（延迟跟随鼠标光标），它的背景颜色为 #000 并且 mix-blend-mode 设置为不同。我的 body 背景颜色和文本设置为#fff。现在，我有一个带有文本 "HELLO" 的 p 标签，我希望它只显示单词 "H" 和 "O"，因此我创建了一个颜色设置为 #000 的跨度。当我将鼠标悬停在 P 标签上时，由于 mix-blend-mode，我可以看到我想要的 "ELL" 词，但是 "H" 和 "O" 词变得“不可见”。当光标越过它们时，如何使它们可见？（只是每个单词被光标悬停的部分，而不是整个单词，如果光标没有覆盖整个单词）

有什么解决办法吗？我尝试在 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

我会使用跟在自定义光标

相同位置的 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>

CSS mix-blend-mode + JS

CSS mix-blend-mode + JS

html

javascript

css

mix-blend-mode