Estoy tratando de hacer un cursor personalizado (círculo como cursor). Pero el div no es visible, sin embargo, se está traduciendo pero no es visible.
CÓDIGO HTML
<body> <div class="container"> <div class="cursor"> <!-- <svg height="100" width="100"> <circle cx="15%" cy="15%" r="12%" stroke-width="0"></circle> </svg> --> </div> <div class="header"> <div class="menu-wrapper"> <div class="menu-stroke"></div> <div class="menu-stroke"></div> </div> <div class="logo"> <a> <img src="https://uploads-ssl.webflow.com/60ec058b2e9d9a78efb4e45b/60f9757ec552987c5e48622c_logo.svg" width="26" height="36" /> </a> </div> <div class="contact"> <span class="contact-head">CONTACT</span> <img src="https://uploads-ssl.webflow.com/60ec058b2e9d9a78efb4e45b/60f04597b1bddea37f0be3c5_small-link.svg" width= "26" height="26" /> </div> </div> <div class="main-heading-wrapper"> <div class="heading-slider"> <div class="head-line-1"> <h1 class="head-h1 mb-0">Directrice Artistique Jr,</h6> </div> <div class="head-line-2"> <h1 class="head-h1">UX & UI designeuse</h6> </div> <div class="head-desc"> <h5 class="desc-content">Je crée des expériences digitales au service de l'utilisateur·rice.</h5> </div> </div> </div> </div> </body>CSS
.cursor { width: 20px; height: 20px; z-index: 1000; color: #fff5f0; }JAVASCRIPT
const cursor = document.querySelector('.cursor'); document?.body?.addEventListener('mousemove', onMouseMove); function onMouseMove(e) { TweenMax.to(cursor, 0, { x: e.pageX, y: e.pageY }) }Esta imagen es para mostrar que div tiene alto y ancho y también se está traduciendo pero no es visible