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/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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 1 year later...

Hi all,

Posting some solutions first and then following up with a finicky troubleshooting request!

@Arturo_hernandez – not sure if you're still interested in these fixes as it's been a long time, but for folx working on debugging this particular custom cursor, I'm going to leave a few collected tidbits from across the forum/internet here in one place. Caveat: I'm not a developer or coder (in ANY way) but I've been steadily developing my comfort with integrating custom CSS, HTML, and JS as I build my website, and have managed to bring ideas to life and troubleshoot a ton of bugs using the forum, so it's high time I pay it forward. I've already expressed this elsewhere, but feel compelled to say it again: deep gratitude to power-contributors tuanphan, creedon, and Beyondspace for their indefatigable generosity and expertise. I've rarely even needed to ask them anything directly – every time I have an issue, one or all of them has/have already solved it for another member.

I've used the following code to address these common issues (final code in full below): 

1. Missing hover effect on burger menu icon, accordion item titles, carousel scroll buttons, form input fields (both single line and longer text blocks), and form buttons:

Change the ('a') in both its JavaScript appearances to ( 'a, input, button, sqs-block-button-element, textarea' )

(Full disclosure that I took a bit of a break after troubleshooting this and a bunch of other issues across a number of days, so I can’t quite remember which individual item each addition is addressing, but this string as it is solves the listed problems for me!)

To save you my headache: A quick warning the 'sqs-block-button-element', which prompts the hover effect for the form submit button, won't automatically show its results (like everything else does) within the non-preview Squarespace window that displays next to the CSS and Code Injection panel. It should show in preview mode, but I can't vouch for certain – best to visit your website in a Private/Incognito window to view your changes 🙂

2. Cursor sticking to original location then jumping to new position on scroll:

Change left: e.pageX, top: e.pageY to left: e.clientX, top: e.clientY in JavaScript

Change position: absolute; to position: fixed; in CSS

3. All default cursors (arrow, pointer, select, etc.) displaying along with custom cursor:

This was addressed for me by adding

* {
  cursor: none !important; 
  }

to the top of my CSS, as @tuanphan offered above, even though I already had cursor:none appearing later in my CSS.

So, my current code is...

Add to CSS:

/* Custom cursor */
//Removes default cursor
* {
  cursor: none !important; 
  }
//Stops custom cursor from appearing on mobile
@media ( hover: none ) {
  .cursor {
    display:none !important;
    }
  }
.cursor {
  --size: 15px; //Change this value to set your initial cursor size
  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 don't want the circle to invert
  transition: width 0.3s, height 0.3s, background-color 0.3s; //This changes the speed of the hover transition
  transition-timing-function: ease-out;
  }
.cursor-dot.active {
  --size: 75px; //Change this value to set your hover cursor size
  background-color: #ffffff;
  }
//end custom cursor

Add to Code Injection > Header:

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

Add to Code Injection > Footer:

<script>

  $( ( ) => {
  
    $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
  
    $( window ).mousemove ( function ( e ) {
    
      $( '.cursor' ).css ( {
      
        left: e.clientX,
        top: e.clientY
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a, input, button, sqs-block-button-element, textarea' ).on ( 'mouseenter', function ( ) {
        
        $( '.cursor' ).addClass ( 'active' );
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a, input, button, sqs-block-button-element, textarea' ).on ( 'mouseleave', function ( ) {
      
        $( '.cursor' ).removeClass ( 'active' );
        
        } );
        
      } );
      
    } );
    
  </script>

Now for the troubleshooting request!

1. In Chrome, the default (arrow) cursor is still showing momentarily after a link to another page has been clicked: Cursor issue in Chrome.

2. In Safari, the default (arrow) cursor is showing when a link is clicked; remaining visible for the entire duration of time between the click and the next page's load; and when next page loads, both the custom cursor AND the default cursor appear on the page until the cursor is moved: Cursor issue in Safari.

Website: https://radicalhealing.ca
No password

I've scoured the forum and beyond for solutions and have some thoughts that I don't know how to address in code...will wait to share them as this might be really easy to solve and I don't want to make this post even longer!

Link to comment
On 2/13/2024 at 6:05 PM, cat_not_kitty said:

1. In Chrome, the default (arrow) cursor is still showing momentarily after a link to another page has been clicked: Cursor issue in Chrome.

2. In Safari, the default (arrow) cursor is showing when a link is clicked; remaining visible for the entire duration of time between the click and the next page's load; and when next page loads, both the custom cursor AND the default cursor appear on the page until the cursor is moved: Cursor issue in Safari.

Website: https://radicalhealing.ca
No password

I've scoured the forum and beyond for solutions and have some thoughts that I don't know how to address in code...will wait to share them as this might be really easy to solve and I don't want to make this post even longer!

I've removed the cursor for now, as it wasn't looking as polished as I'd want with these remaining issues, but I'm still hoping that I might be able to find a solution to the above glitches. Would you have any thoughts @tuanphan,  @creedon, or @Beyondspace? Could adding an event listener for 'unload' (and/or some other event that happens after a link is clicked and when a page loads) help? (As I said – I'm not a developer, so forgive me if this is a very silly question ☺️!)

Or could modifying any of these solutions work: https://stackoverflow.com/questions/3734559/change-cursor-when-loading-page?

When I was having a go at troubleshooting everything before coming to the forum, I also tried adding (drawing from the solution found here: https://stackoverflow.com/questions/28823987/is-there-any-way-to-make-the-cursor-pointer-for-all-onclick-events-in-the-page:

a:active {
  cursor: none important!;
}

and

[onClick] {
    cursor:none !important;
}

to my CSS but neither of these fixed any of the problems.

I also had the thought that adding some of the code here PLUS adding a blank image as a secondary custom cursor (thereby replacing the arrow that's appearing from some existing code) might work in combination to address everything, but I'm out of my league in terms of deciphering how to realise any of these solutions fully.

Any chance something here moves in the right direction?

Edited by cat_not_kitty
Link to comment

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.