Estoy tratando de hacer un sitio web en el que una palabra "esbelta" siga el cursor. Hay dos problemas que tengo con los que estoy luchando. primero: el elemento <div id="circle">lean</div> (ver html a continuación) solo funciona cuando hay texto encima. mi segundo problema es que la palabra está atascada en la esquina derecha y no se mueve.

aquí está mi código:

 let circle = document.getElementById('circle'); const onMouseMove = (e) => { circle.style.left = e.pageX + 'px'; circle.style.top = e.pageY + 'px'; } document.addEventListener('mousemove', onMouseMove);

 body { margin: 0; padding: 0; overflow: hidden; background-color: white; color: #8A2BE2; } div { position: absolute; transform: translate(-50%, -50%); height: 35px; width: 35px; }

 a <div id="circle"> lean </div>

¿Es posible que esto tenga algo que ver con la versión de los archivos html? He creado en gran medida este html a partir de una combinación de otros tutoriales antiguos. Lo siento si esta es una pregunta tonta, todavía soy un programador novato.