How to allow interactions with a custom cursor?

I set the Z-index of the cursor to 100 so it’s above most other elements on the site. I also added the following HTML embed code because I want it to still be able to click links and trigger hover interactions

    pointer-events: none;}

However, even with that code I still cant do things like highlight text, trigger hover animations, or click links. The custom circle cursor is just kinda isolated and moves in its own layer over everything else. What else can I do to make the custom cursor act like a regular cursor?

Please only focus on the Home page since that’s the only one I’m currently playing around with the custom cursor.
Here is my site Read-Only: Link

Hello @kzw133, yeah something very weird is going on with your cursor wrapper class, your code is correct but for some reason it doesn’t work, maybe you used it before in another page and it is inheriting styles that is not making it work correctly? or it might be a glitch with that particular class. Anyway, to fix your issue you have to change that wrapper class. Take a look at this quick loom video I hope this helps!

AHH this is amazing, thank you so much!!! It’s so weird because I previously had the code as what you edited it to in the video. It seems like the class was the main culprit though, which I have renamed and now it works!! I’m so glad it was such a simple fix!

1 Like