Custom cursor

[Toptoys2uHS]

Hello All,

I am trying to update the cursor on the site to have two different cursors (one for the default state, and one for hovering over links), however when I implement the code, I only end up with one type of cursor image, which is currently the one for hover.

Here is the code:

<style>
html {
pointer-events::none :url({{'https://cur.cursors-4u.net/holidays/hol-5/hol424.cur'}}), auto;
}
html *{
cursor: url({{'https://cur.cursors-4u.net/holidays/hol-5/hol462.cur'}}), auto !important;
}
</style>

Would anyone be able to update this code to have the two different cursor available? One cursor for default use, and one appearing once hovering over a URL.

The website can be found here: https://toptoys2u.co.uk/

Appreciate any help!

[PageFly-Oliver]

Hi @Toptoys2uHS ,

 I think you can use the code. example

<style>
html{
cursor:url(https://a.1stdibscdn.com/assets/images/global/cursors/magnifier.svg),url(https://a.1stdibscdn.com/assets/images/global/cursors/magnifier.png),url(https://a.1stdibscdn.com/assets/images/global/cursors/magnifier.cur),pointer;
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[Toptoys2uHS]

Hello @PageFly-Oliver 

I  have copy and pasted the code into theme.liquid, unfortunately this did not work and it still only shows the one type of cursor as default, but once it is hovered over a link, it disappears and displays the default "hand" cursor.

Would I need to upload the image for the .cur to work?

[PageFly-Oliver]

Can you share your URL so I can check it?

[Toptoys2uHS]

Hello @PageFly-Oliver 

Here are the files currently: 

https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673

https://cdn.shopify.com/s/files/1/1779/2423/files/Christmas_Candy_Cane_Cursor.png?v=1697028426

[PageFly-Oliver]

Hi,

I think you can use two more formats: .cur and .svg. to use the same as my structure above