waynecai

Modified from @creedon The following code works for me: Add the following to Design > Custom CSS. * { cursor: none; } .cursor { --size: 30px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: fixed; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width 0.3s, height 0.3s, background-color 0.3s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); var cursor = $(".cursor"); $( window ).mousemove ( function ( e ) { cursor.css ( { top: e.clientY, left: e.clientX } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { cursor.addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { cursor.removeClass ( 'active' ); } ); } ); } ); </script>