Streaming live at 10am (PST)

Custom cursor problems


#1

I have been trying for ages to get a custom cursor to work in webflow, following this thread in particular

All of the custom code bits I have experimented with have worked perfectly, except for the custom cursor code, it just won’t work. I’ve even tried starting new blank sites to test it but I can’t get it to work, i’m tearing my hair out!

Here is the share link to my site,

If anyone could have a look I would be eternally grateful,

Cheers,

Damiaan


#2

You’re not telling where we should look on your site :slight_smile:

The code linked is ok, it means any element of that class hovered by the cursor will get the defined image as a cursor. But you can google for image limitations. They’re not the same for each browser. Try with a 32 x 32 PNG image. Be sure to make the image stick to the upper left corner of the artboard.

Custom cursors aren’t recommended. They look horrible most of the time and users don’t really like to have their cursor changed to something fancy. But you decide :slight_smile: Cursor design is hard. It’s small and need to be black with a white outline to be visible at all time. I tried many times and was never satisfied with the result.

I made an example for you on that site (it’s obvious), but it’s very poor with a very large cursor that’s not optimized or refined at all.

http://candyshop.webflow.io/

Sharing link:

https://preview.webflow.com/preview/candyshop?preview=4a66108fe401388812bc6717a8c47e29

Here’s the image used (too big, no outline):

mic32

Code:

<style>
.mic-cursor {
cursor: url('https://daks2k3a4ib2z.cloudfront.net/5931952fcb454512c039a2b4/5a204d414ee3d200016a622e_mic32.png'), default;
}
</style>

#3

Hey Vincent,

Thanks very much for your reply!

I’m trying to capture the sliders controls and replace with a larger arrows,

I tried copy and pasting your code exactly into my site and amending the class but it still won’t work when published :confused:

I will try a new site from scratch with your exact snippet and see how it goes,

Thanks,

D


#4

edit _______________


#5

Hey Vincent,

I think I might have figured it out, just now I was applying the cursor to an empty div and it wouldn’t capture - Now I have tried to capture it over an image instead and it it works!

On my original site I was try to get it to catch over the arrow buttons (set to 50% so left and right cover half of the image) that come with a set of sliders, - It seems like it doesn’t want to catch over those (maybe because it’s empty) - is that normal? is there anything else I can do?