About the difference between events mouseover, mouseout, mouseenter, mouseleave_javascript skills

I have recently encountered this problem in online exams and course malls: when the mouse slides over, a layer appears. When the mouse slides to the current layer, mouseover and mouseout will flash in lower version browsers. Phenomenon, there are many ways to solve this phenomenon, but I think one of the simplest is to replace mouseover and mouseout with the corresponding mouseenter and mouseleave.

The mouseover event occurs when the mouse pointer is over an element.

This event is most often used together with the mouseout event.

Note: Unlike the mouseenter event, the mouseover event will be triggered whether the mouse pointer passes through the selected element or its sub-elements. The mouseenter event is only fired when the mouse pointer passes over the selected element.

Note: Unlike the mouseleave event, the mouseout event will be triggered whether the mouse pointer leaves the selected element or any child element. The mouseleave event is only triggered when the mouse pointer leaves the selected element. See the example below for a demonstration.

The mouseenter event occurs when the mouse pointer passes through an element. This event is most often used in conjunction with the mouseleave event.

Note: mouseover and mouseout events will also be triggered when the mouse pointer passes through the child elements of the selected element. When binding events, sometimes unexpected bugs may be caused by the mouseover mouseout event

mouseover and mouseenter

The mouseover event will be triggered whenever the mouse pointer passes through the selected element or its sub-elements.

The mouseenter event will only be triggered when the mouse pointer passes through the selected element.

mouseout and mouseleave

The mouseout event will be triggered whether the mouse pointer leaves the selected element or any child element.

The mouseleave event will only be triggered when the mouse pointer leaves the selected element.