Как сделать текст видимым, когда на него наводится пользовательский курсор? ⇐ CSS

[Anonymous]

У меня есть круг, который следует за курсором. Мне было интересно, могу ли я добавить эффект, чтобы при наведении курсора на текст только текст под кругом стал черным, чтобы вы могли видеть текст, даже если белый круг находится поверх него.
Я пытался сделать текст черным при наведении на него курсора с помощью CSS, но это не сработало, потому что слова слишком большие, поэтому черный текст за пределами круга сливается с фоном. p>
Я хочу, чтобы только текст под кругом стал черным, а остальная часть осталась белой.

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
const interBubble = document.getElementById('circle');
let curX = 0;
let curY = 0;
let tgX = 0;
let tgY = 0;

function move() {
curX += (tgX - curX) / 10;
curY += (tgY - curY) / 10;
interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
requestAnimationFrame(() => {
move();
});
}

window.addEventListener('mousemove', (e) => {
tgX = e.clientX;
tgY = e.clientY;

if (e.target.tagName === 'P' ||
e.target.tagName === 'A' ||
e.target.tagName === 'BUTTON' ||
e.target.parentNode.tagName === 'BUTTON') {
interBubble.classList.add('big');
} else {
interBubble.classList.remove('big');
}
});

move();
});

Код: Выделить всё

Body {
background-color: black;
overflow: hidden;
}

div {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}

p {
color: white;
font-size: 30px;
}

p:hover {
color: black;
}

:root {
--trans-bounce: cubic-bezier(.4,2.2,.6,1.0);
--trans-time: .4s;
}

.mouseFollowCircle {
width: 30px;
height: 30px;
border-radius: 999px;
position: absolute;
z-index: 1;
top: -15px;
left: -15px;
box-shadow: 0 0 10px white;
background-color: white;
pointer-events: none;
backdrop-filter: blur(2px);
transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
}

.mouseFollowCircle.big {
width: 70px;
height: 70px;
border-radius: 999px;
position: absolute;
z-index: 1;
top: -35px;
left: -35px;
box-shadow: 0 0 10px white;
background-color: white;
pointer-events: none;
backdrop-filter: blur(2px);
transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
}

Код: Выделить всё

Hello World

Подробнее здесь: https://stackoverflow.com/questions/782 ... rs-over-it