当鼠标移到div1上的时候，会出现div2。出现时div2在div1的上面，div2在出现后发生闪烁的问题。
于是 开始 找问题根 源 ，发现 原来 是因为当我们触发div1的时候，div2出现，但是div2是存在于div1上面的，所以当div2出现后，会又一次触发下面div1的事件。通常我们可能给的事件是mouseover和mouseout，因为两个div叠加，div2出现时会多次触发div1的事件，所以就会发生闪烁问题。
解决：
1.一开始换mouseenter和mouseleave，但是发现还是一样的问题。
注：
mouseover()与mouseout()&nbs p; 表示鼠标移入和移出的时候触发，穿过子元素也会触发
mouseenter()和mouseleave() 表示鼠标穿过和穿出时候触发，穿过子元素不会触发
2.然后又添加e.stop PR opagation();阻止冒泡和e.p rev entDefault();阻止默认事件，还是没有对症。
注：
e.stopPropagation(); //阻止冒泡之后，就不会形成冒泡向上传递了。
e.preventDefault(); //阻止默认行为
3.最后换为切换事件toggle切换事件也不顶事儿。
4.最终，如果想用js解决这个问题可能不容易，用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢？网上查了很多资料，发现也有很多人遇到这个问题，使用的是css中的hover来解决的。
具体使用方法：
给两个div的父元素，也就是共同包裹两个div的 盒子 一个hover，当父元素hover时，div2的样式设置为dis play ：block;于是就顺利解决了这个问题，不会再出现闪烁问题。
下面上代码：
ht ML 部分：
XM L/HTML Code 复制内容到剪贴板
< div class = "fudiv" > < span class = "div1" > < img src = "img/jixinjia-partner1. jpg " alt = "" /> </ span > < div class = "div2" > < div class = "box6" > < img src = "img/qr-code-bg1%20(1).jpg" alt = "p" /> </ div > < p > 扫码有奖 </ p > </ div > </ div >
css部分：
CSS Code 复制内容到剪贴板
.fudiv:hover .div2 { display : block ; } .div2{ display : none ; }
原本 jq uery部分，这种方式会出现闪烁问题
JavaScript Code 复制内容到剪贴板
<script> $(document).ready( function (){ $( ".div1" ).mouseover( function (e){ e.stopPropagation(); $( ".div2" ).show(); } ); $( ".div1" ).mouseout( function (e){ e.stopPropagation(); $( ".div2" ).toggle(); } ); } ); </script>
以上这篇两个div叠加触发事件发生闪烁问题的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址： http://www.cnblogs.com/hanyining/p/5470581.html
总结
以上是 为你收集整理的 两个div叠加触发事件发生闪烁问题的解决方法 全部内容，希望文章能够帮你解决 两个div叠加触发事件发生闪烁问题的解决方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于两个div叠加触发事件发生闪烁问题的解决方法的详细内容...