jquery中的mouseout问题-优快云博客

本文介绍了一个在IE浏览器中遇到的鼠标事件导致页面元素闪动的问题，并提供了两种解决方案：一种是使用jQuery的hover方法，另一种是用mouseleave替代mouseout事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

今天遇到了这个问题，很是郁闷

jQuery('.side-nav li.level0').mouseover(function(){
          jQuery(this).find('ul.level0').addClass('over');
          jQuery(this).css({position:"relative","border-top":"1px solid #E4E4E4","border-bottom":"1px solid #E4E4E4"});
   });
   
    jQuery('.side-nav li.level0').mouseout(function(){
          jQuery(this).find('ul.level0').removeClass('over');
          jQuery(this).css({"border-top":"1px solid #FFF","border-bottom":"1px solid #FFF"});
   });

这段jquery看似没什么问题，很简单的鼠标事件，但是在ie下会出现闪动，就是使用mouseout时，鼠标只要在容器里一移动，就被出发了hide()，其实是因为mouseout事件也会影响到子元素，也就是事件可能被同时绑定到了该容器的子元素上，所以鼠标移出每个子元素也都会触发hide()，后来我同事改了实现方式

jQuery('.side-nav li.level0').hover(function(){
          jQuery(this).find('ul.level0').addClass('over');
          jQuery(this).css({position:"relative","border-top":"1px solid #E4E4E4","border-bottom":"1px solid #E4E4E4"});
   },function(){
          jQuery(this).find('ul.level0').removeClass('over');
          jQuery(this).css({position:"static","border-top":"1px solid #FFF","border-bottom":"1px solid #FFF"});
   });

这下就ok了，在网上查了下，原来jquery1.4版本后加了mouseleave来替换mouseout，也是可以的

jQuery('.side-nav li.level0').mouseover(function(){
          jQuery(this).find('ul.level0').addClass('over');
          jQuery(this).css({position:"relative","border-top":"1px solid #E4E4E4","border-bottom":"1px solid #E4E4E4"});
   });
   
    jQuery('.side-nav li.level0').mouseleave(function(){
          jQuery(this).find('ul.level0').removeClass('over');
          jQuery(this).css({"border-top":"1px solid #FFF","border-bottom":"1px solid #FFF"});
   });

有的事情真的是遇到了才会知道

转载于:https://my.oschina.net/liufeng815/blog/353524