Method one. Replacing Mouseover/mouseout "best practices" with Mouseleave/mouseenter
MouseOver and MouseEnter
MouseOver = The MouseOver event is triggered regardless of whether the mouse pointer passes through the selected element or its child elements.
MouseEnter = The MouseEnter event is triggered only when the mouse pointer is inside the selected element (within the element) from outside the element.
Mouseout and MouseLeave
Mouseout = The Mouseout event is triggered whenever the mouse pointer leaves the selected element or any child element.
MouseLeave = The MouseLeave event is triggered only when the mouse pointer is out of the element (outside the element) through the selected element.
Method Two: Use E.stoppropagation () to block events from further propagation
E.stoppropagation () Terminates the event further propagation during the capture, target processing, or bubbling phase of the propagation process. After the method is called, the handler that handles the event on that node is called, and the event is no longer dispatched to the other node.
How to resolve a mouseout event that triggers a parent element when the mouse moves to a child element