主页 / 建站知识 /

两个div叠加触发事件发生闪烁问题的解决方法

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

当鼠标移到div1上的时候，会出现div2。出现时div2在div1的上面，div2在出现后发生闪烁的问题。

于是开始找问题根源，发现原来是因为当我们触发div1的时候，div2出现，div2是存在于div1上面的，所以当div2出现后，会又一次触发狼蚁网站SEO优化div1的事件。通常我们可能给的事件是mouseover和mouseout，因为两个div叠加，div2出现时会多次触发div1的事件，所以就会发生闪烁问题。

解决

1.一开始换mouseenter和mouseleave，发现还是一样的问题。

注

mouseover()与mouseout()   表示鼠标移入和移出的时候触发，穿过子元素也会触发

mouseenter()和mouseleave()   表示鼠标穿过和穿出时候触发，穿过子元素不会触发
 

2.然后又添加e.sPropagation();阻止冒泡和e.preventDefault();阻止默认事件，还是没有对症。

注

e.sPropagation();   //阻止冒泡之后，就不会形成冒泡向上传递了。

e.preventDefault();    //阻止默认行为

3.换为切换事件toggle切换事件也不顶事儿。

4.最终，如果想用js解决这个问题可能不容易，用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢？网上查了很多资料，发现也有很多人遇到这个问题，使用的是css中的hover来解决的。

具体使用方法

给两个div的父元素，也就是共同包裹两个div的盒子一个hover，当父元素hover时，div2的样式设置为displayblock;于是就顺利解决了这个问题，不会再出现闪烁问题。

狼蚁网站SEO优化上代码

html部分

XML/HTML Code复制内容到剪贴板
  1. <div class="fudiv">  
  2.         <span class="div1"><img src="img/jixinjia-partner1.jpg" alt=""/></span>  
  3.         <div class="div2">  
  4.                  <div class="box6"><img src="img/qr-code-bg1%20(1).jpg" alt="p"/></div>  
  5.                  <p>扫码有奖</p>  
  6.         </div>  
  7. </div>  

css部分

CSS Code复制内容到剪贴板
  1. .fudiv:hover .div2 {   
  2.          display: block;   
  3. }   
  4.   
  5. .div2{   
  6.           display: none;   
  7. }  

原本jquery部分，这种方式会出现闪烁问题

JavaScript Code复制内容到剪贴板
  1. <script>   
  2.     $(document).ready(   
  3.             function(){   
  4.                 $(".div1").mouseover(   
  5.                         function(e){   
  6.                             e.sPropagation();   
  7.                             $(".div2").show();   
  8.                         }   
  9.                 );   
  10.                 $(".div1").mouseout(   
  11.                         function(e){   
  12.                             e.sPropagation();   
  13.                             $(".div2").toggle();   
  14.                         }   
  15.                 );   
  16.             }   
  17.     );   
  18. </script>  

以上这篇两个div叠加触发事件发生闪烁问题的解决方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

原文地址

上一篇：CSS盒子模型是什么 下一篇：解决CSS3的opacity属性带来的层叠顺序问题

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by