Perfect solution to the problem that hover event of jQuery keeps flashing in IE
- 2021-07-18 07:09:51
- OfStack
When using jQuery's hover event, the menu often flashes because the mouse slides too fast. I believe many friends have encountered the continuous contraction of the vertical drop-down menu made by themselves, which is very annoying. Today, when designing a menu for a website, I also encountered this situation. As a result, I found N on Baidu for a long time, but I didn't find a solution. Tucao 1 here, Baidu is too 2, and the contents included are of little value. Finally, a solution was found in google. Below, I will teach you the solution that hover of jQuery will cause constant flashing in IE.
$("#category ul").find("li").each( function() {
$(this).mouseover( function() {
$(this).children("ul").show();
} );
$(this).mouseout( function() {
$(this).children("ul").hide();
} );
} );
When the mouse moves the drop-down menu, the menu flashes continuously, indicating that mouseover and mouseout events are triggered continuously.
In fact, a very simple solution: change mouseover to mouseenter and mouseout to mouseleave. The mouseenter and mouseleave events are implemented in the jQuery library and are not browser-native events. But the most important thing is to solve the problem that the menu keeps flashing!
$("#category ul").find("li").each( function() {
$(this).mouseenter(function() {
$(this).children("ul").show();
} );
$(this).mouseleave(function() {
$(this).children("ul").hide();
} );
} );