Custom cursor hover effect

Site URL: https://megalodon-trout-7tbj.squarespace.com/

Hi,
I'm using a code with CSS and JS to create a custom circular cursor taken from previous posts @Jprood (

In general it works pretty well, but in some elements the hover effect doesn't work:
• The "plus" icon burguer
•  The accordion
• The scrolling marquee
• The form button.

Could someone help me to fix it? Please!!!
Thanks in advance

Web: https://megalodon-trout-7tbj.squarespace.com/
Password: Temporary77

Try adding this to Design > Custom CSS

* {
    cursor: none !important;
}

Hi and thanks for your answer but I already had that code included and the problem continue.
I copy all the code here:

In Design > Custom CSS

@media ( hover: none ) {

  .cursor {
  
    display: none !important;
    
    }
  }

* {

  cursor: none;
  
  }

.cursor {

  --size: 10px;
  
  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; /* 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.6s, height 0.6s, background-color 0.6s;
  transition-timing-function: ease-out;
  
  }

.cursor-dot.active {

  --size: 50px;
  
  background-color: #ffffff;
  
  }

In Settings > Advanced > Code Injection > HEADER. 

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

In Settings > Advanced > Code Injection > FOOTER. 

<script>

  $( ( ) => {
  
    $( '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' );
        
        } );
        
      } );
      
    } );
    
  </script>

Do you know any solution?
Thanks

Try adding code I sent to top of Custom CSS box

I've done but the problem continues.
Any solution? 🙏

Thanks

On 8/1/2022 at 2:40 PM, Arturo_hernandez said:

I've done but the problem continues.
Any solution? 🙏

Thanks

It looks like you solved? I see burger icon/form button cursor is fine

No. The problem is the hover effect doesn't work when you are over:
• The "plus" icon burguer
•  The accordion
• The scrolling marquee
• The form button.

On 8/6/2022 at 2:34 PM, Arturo_hernandez said:

No. The problem is the hover effect doesn't work when you are over:
• The "plus" icon burguer
•  The accordion
• The scrolling marquee
• The form button.

It looks fine to me/ Chrome/Windows

Video: https://www.loom.com/share/4fb1f9b246b74aedb9d75720d6d6defb

Hi Tuan,

If you check the video you can see that the circle cursor doesn't grow (hover effect) in the indicated items. Can you help me with this?