Brower hover events too slow

I have a photo, which displays an overlay when hovered.

Everything works fine, but if i'm beeing fast with the mouse (going from top to bottom of page for example), the overlay will be shown when i pass hover the photo, but won't hide when hover is done.

Here is what I tried :

• different events handler like onMouseEnter and onMouseLeave, onMouseOver and onMouseOut, all with onFocus and onBlur
• conditional CSS classes : ${!isHover && 'hidden'}

But always got the same result.

Any idea how to improve this so the browser can follow the state change ?

Here is the simplified code:

const Photo = (): JSX.Element => {
const [isHover, setHover] = useState<boolean>(false);
const LayoutFactory = (): JSX.Element => {
switch (true) {
case archived:
return <ArchiveLayout />;
case Boolean(photo):
return isHover ? (
<HoverLayout />
) : (
<IconPlayOutline />
);
default:
return <></>;
}
};
const MissingImageFactory = (): JSX.Element => {
if (archived) {
return (
<div>
// CONTENT
</div>
);
}
return <MissingImage />;
};
const LayoutWrapper = ({ children }: PropsWithChildren): JSX.Element => {
return (
<div>
{children}
</div>
);
};
const HoverLayout = (): JSX.Element => {
return (
<LayoutWrapper>
// CONTENT
</LayoutWrapper>
);
};
const ArchiveLayout = (): JSX.Element => {
return (
<LayoutWrapper>
<div>
// CONTENT
</div>
</LayoutWrapper>
);
};
const Image = (): JSX.Element => {
return photo ? (
<img
alt="annonce"
src={photo}
/>
) : (
<MissingImageFactory />
);
};
return (
<button
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
{...props}
>
// CONTENT
</button>
);
};
export default Photo;

I think the state isn't able to keep up with how fast the events are fired. You can try to check once after a few ms if the mouse is still on the picture to "fix" it. I don't really like that solution tho, as it is very hacky, hard to maintain and will probably break easily.

The best way is probably to find a css solution, as I think it is for most style related questions. Those are easier to maintain and more performant. Good old css still has a lot going for it