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();
 } ); 
} );

Related articles: