CSS 混合模式 + JS答案

【问题标题】：CSS mix-blend-mode + JSCSS 混合模式 + JS
【发布时间】：2020-04-13 12:23:52
【问题描述】：

所以我有一个自定义 js 光标（在鼠标光标之后有延迟），它的背景颜色为 #000，mix-blend-mode 设置为差异。我的正文背景颜色和文本设置为#fff。现在，我有一个带有文本“HELLO”的 p 标签，我希望它只显示“H”和“O”这两个词，所以我创建了一个颜色设置为 #000 的跨度。当我将鼠标悬停在 P 标签上时，由于混合模式，我可以看到我想要的“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>

【问题讨论】：

标签： javascript html css mix-blend-mode

【解决方案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>

【讨论】：