Problems with custom mouse on hover

Design help Animations & Interactions
1

Hi all,

I am building a portfolio site. One of the design specs has a custom arrow on hover for links.

I have created a full-screen div position (z index 999) absolute that has the custom mouse in it which has an interaction that tracks the actual mouse, this div is hidden as the initial state. On my link class, I have disabled the mouse and I have set up an interaction that shows the div on hover hence revealing the custom mouse, however, it only shows as a glitch blinking repeatedly and behind the actual text which is strange since the z index is the highest on the page it also does not allow to click on the link

Really appreciate any help on this!

Thanks a lot

Here is my public share link: https://preview.webflow.com/preview/svelte-site?utm_medium=preview_link&utm_source=dashboard&utm_content=svelte-site&preview=43d9015e919a49223e04a1b26335f67b&mode=preview

2

Can we see the published project.

3

sure thing,

https://svelte-site.webflow.io/

4

Hello,

found your problem. Add this custom code:

5 
 <style>
    .custom-cursor-wrapper {
    pointer-events: none;
    }
 </style>
1 Like
6

Change the name of “Custom mouse Wrapper” to “custom-cursor-wrapper”

7

Perfect thanks so much, it works!