Custom code for changing pointer only on hover of select element

Design help Custom code
1

Hey all,

I have a button that I would like to have the pointer change to a colored circle on hover. I put it in a div named ‘cursor-hover’, and input the following code into the custom code window:

/*Here we apply the hover state cursor to elements that are not links */ .cursor-hover:hover { cursor: url('https://uploads-ssl.webflow.com/63d3fe913e1430d0990ca285/63fe3a204bd44379e58fec50_Green%20Mouse.png'), auto !important }

Anyone have any input on what I’m missing?

I also tried creating a custom pointer for the whole page and only using it for the button, but couldnt figure that animation out.

Thanks,
Patrick

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @patrickkolb

if you give a button class let’s say btn-submit then it should work, you should omit :hover pseudo-class.

<style>
.btn-submit{
cursor: url("https://uploads-ssl.webflow.com/632625965c83165d65e04514/63fe8b7fe07e3d837e9f0aac_63fe3a204bd44379e58fec50_Green%20Mouse.png"), auto;
}
</style>

The best way to get accurate help is to follow forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  • Upload as many screenshots/screencast videos as possible to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @patrickkolb
3

Appreciate the feedback on this. I actually got it to work just now by including the original custom code in the settings of the page in designer and pasting it into the top html block, as well as going into the project settings tab in the hamburger menu in the top left. Will follow the post guide in the future. Thanks
Patrick

4

That will be great as now you are mentioning some other custom code you didn’t mention in original request and also there wasn’t any chance check if code implementation is correct. Anyway simple solution provided also works without any issues.

Good luck on your journey :wink:

feel free to close your request as solved