When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo.
I have tried different event handlers like onMouseEnter, onMouseLeave, onMouseOver, and onMouseOut, along with onFocus and onBlur. I also attempted using conditional CSS classes like ${!isHover && 'hidden'}, but the issue persists.
Is there a way to improve this so that the browser can accurately track the state changes? Below is a simplified version of the code:
const Photo = (): JSX.Element => {
const [isHover, setHover] = useState<boolean>(false);
// Other components and functions here...
return (
<button
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
{...props}
>
// Content goes here...
</button>
);
};
export default Photo;