CODEWITHSUNDEEP
javascriptreactjsreact-hooksmouse-cursoruse-ref
ells157
ells157

Reputation: 19

Custom cursor in React should change when hovering over every link

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.

Upvotes: 2

Views: 867

Answers (1)

Unmitigated
Unmitigated

Reputation: 89224

You can use the CSS cursor property.

a {
    cursor: some-value
}

Upvotes: 1

Related Questions