Inverted Cursor Hover Effect

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to 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;
  
  }

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;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

8 hours ago, creedon said:

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to 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;
  
  }

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;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

perfect!! youre the man! i would have never been able to pick all that out. Thank u!!!!

On 11/2/2020 at 10:39 AM, creedon said:

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to 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;
  
  }

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;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

@creedon this works perfectly! thank you :)

Hi,

I have used your code for one of my websites and it works perfectly!   I had used it for another one but for some reason it has disappeared!

If you have any ideas why i'd greatly appreciate it.  

I had your cool cursor working fine on here :  https://colette-smith-3.squarespace.com/ 

pw: hutchsite21

and it’s working fine on another site, https://colettesmith.squarespace.com/ 

pw:lasseflode21

It was working perfectly  on the 1st one until a few hours ago! I have no idea what has happened.

Any help would be greatly appreciated!  I literally haven’t touched the code….  

On 11/2/2020 at 2:39 AM, creedon said:

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to 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;
  
  }

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;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

Hi,

I have used your code for one of my websites and it works perfectly!   I had used it for another one but for some reason it has disappeared!

If you have any ideas why i'd greatly appreciate it.  

I had your cool cursor working fine on here :  https://colette-smith-3.squarespace.com/ pw: hutchsite21

and it’s working fine on another site, https://colettesmith.squarespace.com/ pw:lasseflode21
It was working perfectly  on the 1st one until a few hours ago! I have no idea what has happened.

Any help would be greatly appreciated!  I literally haven’t touched the code….  

1 hour ago, failbetter said:

I had your cool cursor working fine on here :  https://colette-smith-3.squarespace.com/ pw: hutchsite21

Any help would be greatly appreciated!  I literally haven’t touched the code….  

It's not my code I just got it working for Jprod on SS. 😀

The cursor appears to be working to me on this site.

On 2/2/2021 at 6:50 PM, creedon said:

It's not my code I just got it working for Jprod on SS. 😀

The cursor appears to be working to me on this site.

Hey - yes but as soon as I add the mix-blend-mode: difference;     it disappears. 

IT was one of my background colors - it was affecting the whole thing. 

Hi!

I have tried your code and it works perfectly for me, thank you! Is there anyway I can animate it to achieve something like this? I like how it follows behind you. Also, the little hand still shows up when I hover something interactive, is there anyway to remove it?

https://ascale.es/

Thank you so much! 🙂

On 11/2/2020 at 2:39 AM, creedon said:

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to 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;
  
  }

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;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

This is amazing!

Would you be able to let me know how you would change the colours? Say like a blue dot instead of a black dot, I'm not sure what code the colour blue I want is how would I find that out?

31 minutes ago, C-bear said:

Would you be able to let me know how you would change the colours?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

On 4/10/2022 at 7:44 PM, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hi!

Thanks so much for getting back to me!,

So I played around with changing the colours in the code by using color-hex.com and the colour turns out completely different to the one I want (blue turns out yellow etc) any advice on this? 

Also I think I've somehow managed to get rid of the inverted element on hover as the dot is now just a solid colour...

Any help would be much appreciated!

https://www.chloebthomas.com/shop

@C-bear

Other than the color begin off it appears that all the code is working. Try the following.

.cursor-dot.active {
  --size: 50px;
  background-color: blue;
}

As to why the color came out wrong I don't have a clue. Unless there was a typo or you copied the wrong value from the site.

Let us know how it goes.

18 hours ago, creedon said:

@C-bear

Other than the color begin off it appears that all the code is working. Try the following.

.cursor-dot.active {
  --size: 50px;
  background-color: blue;
}

As to why the color came out wrong I don't have a clue. Unless there was a typo or you copied the wrong value from the site.

Let us know how it goes.

Thanks so much, I tried countless different hex codes to get the right colour and figured out it was the opposite colour on the colour wheel (in my case a dark yellow = cobalt blue) I hope that helps anyone in future!

I do have a new problem now, my drop down menu under graphic design isn't very well spaced out, when hovering on 'graphic design' the 'gallery' title is kind of covered and both 'gallery' & 'projects' seem to veer to the left...? Not a huge problem but it doesn't look totally neat/professional, I was wondering if you could help me with the spacing? Thanks so much!

3 hours ago, C-bear said:

it doesn't look totally neat/professional, I was wondering if you could help me with the spacing?

Add the following to Design > Custom CSS.

#topNav nav .folder ul li a {

  margin-left : 7.5px;
  margin-right : 7.5px;
  padding-left : 0;
  padding-right : 0;
  padding-top : 0.5em;
  
  }

This is for v7.0 using the Wexley template.

Let us know how it goes.

On 4/21/2022 at 6:39 PM, creedon said:

Add the following to Design > Custom CSS.

#topNav nav .folder ul li a {

  margin-left : 7.5px;
  margin-right : 7.5px;
  padding-left : 0;
  padding-right : 0;
  padding-top : 0.5em;
  
  }

This is for v7.0 using the Wexley template.

Let us know how it goes.

Omg it's perfect thank you so much!!

On 11/2/2020 at 2:39 AM, creedon said:

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to 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;
  
  }

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;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

This is working really nicely, thank you so much for sharing. What would be the steps to replace the cursor shape with a custom shape?