Jump to content

Custom cursor hover effect

Recommended Posts

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

 

Link to comment

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.