Custom Cursor doesn't work on hover

[Toptoys2uHS]

Hello All,

I am trying to add two different custom cursors to this website, both of which will be an image file.

Unfortunately, when adding my code in, with two different images and what I assume is two different cursor states (one for default and one for links), the cursor does not change when hovering over links, and just continues with the same cursor.

Please see the code below:

<style>
      html {
        pointer-events::none :url({{'https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673'}}), auto;
      }
      html *{
        cursor: url({{'https://cdn.shopify.com/s/files/1/1779/2423/files/Christmas_Candy_Cane_Cursor.png?v=1697028426'}}), auto !important;
      }
</style>

Would anyone know how to update the code so that two different cursors will be displayed, one for default and one for hovering links?

Please see the website below.

https://toptoys2u.co.uk/

I highly appreciate any help!

[Mike-Omega]

Hi @Toptoys2uHS 

This is Mike from Omega

If you want to custom broomstick for default and Candy cane for link, you can try my CSS code

html * {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673'), auto;
}
html a {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Christmas_Candy_Cane_Cursor.png?v=1697028426'), auto;
}

Hope my answer will help you

Mike from Omega

[Toptoys2uHS]

Hi @Mike-Omega 

Unfortunately, this code only seems to make the broomstick (default) work, while the links change back to a regular "hand" default cursor.

I added this into theme.liquid like so:

<style>
html * {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673'), auto;
}
html a {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Christmas_Candy_Cane_Cursor.png?v=1697028426'), auto;
}
</style>

Would this be better suited in a different asset?

[Mike-Omega · Accepted solution]

Hi @Toptoys2uHS 

Try this: 

<style>
html * {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673'), auto;
}
html a {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Christmas_Candy_Cane_Cursor.png?v=1697028426'), auto !important;
}
</style>

[Toptoys2uHS]

Hi @Mike-Omega 

This seems to work, thank you very much for your help!

This seems to work, and I can use it for specific areas of the site with some (if) statement code too!

Accepted as a solution and like given! 

Thank you once again.

For anyone looking for this solution, the code is below - you only need to change the URLs to your own images - paste into Theme.Liquid

<style>
html * {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673'), auto;
}
html a {
cursor: url('https://cdn.shopify.com/s/files/1/1779/2423/files/Christmas_Candy_Cane_Cursor.png?v=1697028426'), auto !important;
}
</style>