I’m having an issue with onMouseLeave not registering when moving the mouse quickly because I also need to ignore hover actions of children.

I am trying to create an overlay container that appears nearby when you hover over a Card component. When I use onMouseEnter and onMouseLeave combined with a boolean state, it sometimes gets hung up on certain cards and the overlay stays open when moving the mouse across the cards quickly. onMouseOver and onMouseOut completely fixes this issue, but then I have an issue with bubbling when I hover over children components inside the Card component.

How can I achieve seamless hover state (regardless of mouse speed) while ignoring any hover actions over children components?

I found a handful of similar questions asked before such as example1 or example2. However, these only touch the initial bug of hover state getting hung up, and they don’t have answers that also consider the issue with child components and hovering.