Jump to content

Custom cursor - how do I have it used more consistently used within a website?

Recommended Posts

Site URL: https://www.aligma.io/

Site linked above. Password is aliGMA2022!

This is for a client site. I like the custom cursor I have applied to the site, however it is not working half the time (until I scroll down to almost the end of the home page does it apply). Whenever I hover over clickable links too, it reverts back to the default cursor - is there any way to have it applied (or even change colour) when it hovers over a clickable link?

Would love the community's help on this one. Thankyou!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I use this code for one page in a code block. For all pages put it in custom css with the url of your cusor. It will revert back to hand or default pointer on a clickable element of your site. I think  you need that so folks know that it is a call to some kind of action. Add the url of the cursor image of course. 

body {
        cursor: url(),  auto;

You can't just change the cursor color on hover but you can use a second cusor image that is a different color and change to that on hover, add the url of the second image to do so. 

For Cursor on Hover:


cursor: url(), auto;



Edited by derricksrandomviews
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.