Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using React in conjunction with standard CSS. At times, the image lingers if the cursor moves diagonally or too quickly in and out of the container.
My goal is to achieve the same effect as seen on :
https://i.stack.imgur.com/3BmOa.gif
Below you can find my code which is not functioning properly along with a fiddle showcasing the issue: https://jsfiddle.net/smyL9v42/
const {useState, useEffect} = React;
function TextWithCursor() {
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 })
const handleMouseMove = event => {
setCursorPosition({ x: event.clientX, y: event.clientY })
}
return (
<div
className="container"
onMouseMove={handleMouseMove}
>
HELLO
<img
src="https://images.unsplash.com/photo-1608877906884-5ffef2ef9612?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&w=200&q=80"
className="imageWithOpacity"
alt="Custom cursor"
style={{
left: cursorPosition.x,
top: cursorPosition.y,
}}
/>
</div>
)
}
ReactDOM.render( <TextWithCursor />, document.getElementById('root') );
CSS:
.container {
border: 1px solid black;
width: 200px;
cursor: none;
}
.container:hover .imageWithOpacity {
opacity: 1;
}
.imageWithOpacity {
position: fixed;
opacity: 0;
height: auto;
display: block;
}
Here is how it looks when it's broken: https://i.stack.imgur.com/qoftn.gif