Soy nuevo en el desbordamiento de pila y muy novato en todas las secuencias de comandos, así que perdone cualquier error en la sintaxis o la etiqueta, estoy aquí para aprender.

Así que actualmente estoy construyendo un sitio de Squarespace e intentando agregar un código personalizado. Estoy usando un código jquery encontrado para usar un cursor de punto personalizado que cambia de tamaño cuando pasa el mouse sobre un enlace. Funciona según lo previsto, con el js inyectado en el pie de página del sitio y CSS personalizado impulsando el estilo. Vea el ejemplo de mi sitio aquí y aquí

Actualmente, el cursor se amplía a un tamaño específico al pasar el mouse (definido en el css), sin embargo, estoy tratando de encontrar una manera de cambiar la escala/comportamiento del cursor según el tamaño/estilo/tipo de enlace. Entonces, por ejemplo, en un enlace más pequeño, el punto se escala menos y en un botón más grande se escala más, etc.

He encontrado algunas cosas en línea que hacen más o menos lo que quiero, pero al ser nuevo en todo esto, no estoy seguro de cómo aplicar el código proporcionado para que funcione. Esto está cerca de lo que busco: https://github.com/gaoryrt/cursor-dot pero no he podido hacer que funcione.

Cualquier ayuda u orientación sería muy apreciada.

Aquí está mi JS actual:

 $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } );

Y este es el CSS -

 @media ( hover: none ){ .cursor { display: none !important; } } { cursor: none ; } .cursor { --size: 80px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; mix-blend-mode: difference; transition: width 0.5s, height 0.5s, background-color 0.3s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 300px; background-color: #ffffff; }

También tengo esto en la inyección de encabezado de página para llamar al JS:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>