所以我有一個自定義的 js 光標(biāo)（它跟隨鼠標(biāo)光標(biāo)有延遲），其背景顏色為 #000，混合混合模式設(shè)置為差異。我的身體背景顏色和文本設(shè)置為#fff。現(xiàn)在，我有一個帶有文本“HELLO”的 p 標(biāo)簽。我希望僅顯示“H”一詞和“O”，所以我創(chuàng)建了一個顏色設(shè)置為#000的跨度。當(dāng)我將鼠標(biāo)懸停在 P 標(biāo)簽上時，由于混合混合模式，我可以看到“ELL”我想要的詞，但是“H”這個詞和“O”得到”看不見”。當(dāng)光標(biāo)移到它上面時如何使它們可見？ （如果光標(biāo)沒有覆蓋整個單詞，則只是光標(biāo)懸停的每個單詞的一部分，而不是整個單詞）有什么解決辦法嗎？我嘗試改變“H”的顏色和“O”在 mouseenter/mouseleave 上，但它沒有按預(yù)期工作。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>
1 回答
倚天杖
TA貢獻1828條經(jīng)驗 獲得超3個贊
我將使用與自定義光標(biāo)相同位置的 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>
- 1 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消