CSS混合-混合模式+ JS

Question

因此，我有一个定制的js游标(在鼠标光标后面加上一个延迟)，它的背景色为#000，混合模式设置为差异。我的身体背景颜色和文字设置为#fff。现在，我有一个带有文本"HELLO“的p标记，我只想看到单词"H”和"O"，所以我创建了一个跨度，颜色设置为#000。当我悬停在P标签上时，由于混合模式，我可以看到我想要的"ELL“单词，但是单词"H”和"O“变得”看不见“。当游标通过游标时，我如何使它们可见？(如果游标没有覆盖整个单词，则仅是每个单词被游标悬浮的部分，而不是整个单词)。

有什么解决办法吗？我试着更改鼠标/鼠标保存器上"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>

​