Событие наведения курсора мыши не распространяется должным образом (эффект «Добавить кнопку») ⇐ CSS

[Anonymous]

Я хотел сделать простую подсветку кнопки в том месте, где вы наводите на нее курсор, следуя за курсором.
Если кто-нибудь знает способ сделать это без js, это было бы еще лучше (нашел один сумасшедший пост там), но я пытался сделать это с помощью обработчика событий для наведения курсора мыши.
Я перемещаю вложенный элемент div при наведении курсора на кнопку, но на моем сайте это событие не распространяется при наведении курсора на ребенка, и в этой простой игре это работает только при наведении курсора на ребенка.
Ощущение, будто я делаю что-то не так, но не вижу этого.

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

var button = document.querySelector('.button');
var highlightDiv = document.querySelector('.highlight');

button.addEventListener('mouseover', (e) => {
const x = (e.pageX - button.offsetLeft - 300 / 2) + 15;
const y = (e.pageY - button.offsetTop - 100 / 2) + 15;
highlightDiv.style.setProperty('--x', `${x}px`);
highlightDiv.style.setProperty('--y', `${y}px`);
});

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

.button {
border: 1px solid black;
width: 400px;
height: 70px;
}

.highlight {
height: 40px;
width: 40px;
background: radial-gradient(#e66465, #9198e5);
transform: translate(var(--x), var(--y));
}

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

Button Text

Подробнее здесь: https://stackoverflow.com/questions/790 ... ton-effect