Custom cursor in React should change when hovering over every link

Question

I'm trying to create a custom cursor in React, and want the cursor to change in appearance when it hovers over any link on the page.

I can get this to work on a specific single link by using a ref, like so:

<a href="#" ref={myLink}>My link</a>

And then using this to attach event handlers:

myLink.addEventListener('pointerenter', handlePointerEnter); myLink.addEventListener('pointerleave', handlePointerLeave);

But what I want is for the cursor to change when hovering over every possible link on the page, and I won't always have control over the content of this website so adding refs to every link in this way is obviously unrealistic. Any help finding a better solution would be hugely appreciated!

Edit: This is the markup for my custom cursor:

<div ref={cursorSm} className="cursor--sm"></div>
<div ref={cursorLg} className="cursor--lg"></div>

I'm using refs there because I'm using gsap to animate it.

Thanks @OriDrori, how would this work though if the custom cursor is a div and not an image though? — ells157
– ells157, Commented Jan 11, 2023 at 16:52
Please add more code - your cursor, the event handlers that add the custom cursor, and a sample component with a link. — Ori Drori
– Ori Drori, Commented Jan 11, 2023 at 16:55

Unmitigated · Accepted Answer · 2023-01-11 16:44:42Z

1

You can use the CSS cursor property.

a {
    cursor: some-value
}

answered Jan 11, 2023 at 16:44

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ells157 Over a year ago

Wouldn't this only work if the cursor was an image? In my case, the custom cursor consists of a div inside a div.

Collectives™ on Stack Overflow

Custom cursor in React should change when hovering over every link

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related