Jump to content

Custom cursors keep breaking

Recommended Posts

Site URL: www.schnabel.co.uk

Hi all!

I have managed to sculpt my site over the years with custom CSS sourced from all over the web and implemented it with very little actual knowledge for how it works - and for the most part it has worked.

I'm currently battling to get my custom cursors to work properly. When the site loads, they work perfectly. But somewhat erratically when you leave the tab or just wait a long time, the cursors stop behaving properly. Sometimes the left arrow on the gallery will change to the right arrow (and right arrow to left arrow sometimes) and not change when the cursor is moved to the left hand side of the gallery, sometimes the arrows will change to the custom pointer instead. Custom hover over the navigation links will also stop working. I have to click a link or reload the site for it to work again.

Here is the custom CSS that got it (almost) working in the first place:

/* Custom Cursors */

body {
cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png?content-type=image%2Fpng), auto;

}

 a:hover{
cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/5753ec6e-59fb-4856-9cab-7da618a35e00/CursorCrosshairGreen.png?content-type=image%2Fpng), auto;
}


.collection-type-gallery .overlay-controls.left-control {
                               cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/fab4ca5b-9950-47d8-9399-53b4eae1fda1/LeftArrowGreen.png?content-type=image%2Fpng), e-resize;
}
.collection-type-gallery .overlay-controls.right-control {
                               cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/887934a9-adf4-4ba3-979e-767e20ea57b4/RightArrowGreen.png?content-type=image%2Fpng), w-resize;
}

.collection-type-gallery .meta .gallery-controls#numberControls .number {
cursor: crosshair;
}

/* End of Custom Cursors */

Any assistance with getting this to work properly would be much appreciated!

Thanks!

David

Link to comment
  • Replies 3
  • Views 456
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Not really sure what the problem here is, but you can delete the end of each of the source URLs, and add 'apostrophes' around the URL (see bolded):

body {
cursor: url('https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png'?content-type=image%2Fpng), auto;
}

body {
cursor: url('https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png'), auto;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thanks Zygmunt. I have now found that there seems to be no issue when viewing the site on Chrome or Firefox, and the problem only seems to occur on Safari. I have made those small changes to the URLs as you suggest, but this doesn't seem to have made any difference.

Link to comment

You could try using a different format than .png, .svg or .cur might work better on Safari

https://convertio.co/png-cur/

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.