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>