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 => {

  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>