Skip to main content
D
5mo ago

Cursor Hover Style: Pointer (web)

I can't seem to get the cursor to stay in the pointer style on canvas hover. Any pointers? 🤭

What I have that's not working:
onLoad: () => {
riveInstance.resizeDrawingSurfaceToCanvas();
riveCanvas.style.cursor = 'pointer';
// Watch for state machine changes
const stateMachine = riveInstance.stateMachineInputs('LoginMachine');
stateMachine.forEach((input) => {
input.onChange = () => {
riveCanvas.style.cursor = 'pointer'; // Reapply pointer cursor on state change
};
});
},
});

2 replies
D
5mo ago

If you want the cursor to be a pointer when hovering the canvas, you don't need to use events. You can use CSS styling. 

<style>
    canvas {
        cursor: pointer;
    }
</style>
<canvas></canvas>

Fantastic pun, btw. :D

D
5mo ago

Oh man, I did have this... but for some reason it was sporadically losing the pointer after I held it over the canvas for a bit. However, after having changed NOTHING the hover now works perfectly. It just took me asking for help for it to solve itself. Thanks for the reply!