如何解决两个div叠加触发事件发生闪烁的问题,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
当鼠标移到div1上的时候,会出现div2。出现时div2在div1的上面,div2在出现后发生闪烁的问题。
于是开始找问题根源,发现原来是因为当我们触发div1的时候,div2出现,但是div2是存在于div1上面的,所以当div2出现后,会又一次触发下面div1的事件。通常我们可能给的事件是mouseover和mouseout,因为两个div叠加,div2出现时会多次触发div1的事件,所以就会发生闪烁问题。
解决:
1.一开始换mouseenter和mouseleave,但是发现还是一样的问题。
注:
mouseover()与mouseout() 表示鼠标移入和移出的时候触发,穿过子元素也会触发
mouseenter()和mouseleave() 表示鼠标穿过和穿出时候触发,穿过子元素不会触发
2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默认事件,还是没有对症。
注:
e.stopPropagation(); //阻止冒泡之后,就不会形成冒泡向上传递了。
e.preventDefault(); //阻止默认行为
3.最后换为切换事件toggle切换事件也不顶事儿。
4.最终,如果想用js解决这个问题可能不容易,用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢?网上查了很多资料,发现也有很多人遇到这个问题,使用的是css中的hover来解决的。
具体使用方法:
给两个div的父元素,也就是共同包裹两个div的盒子一个hover,当父元素hover时,div2的样式设置为display:block;于是就顺利解决了这个问题,不会再出现闪烁问题。
下面上代码:
html部分:
XML/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; } 原本jquery部分,这种方式会出现闪烁问题 JavaScript Code复制内容到剪贴板 <script> $(document).ready( function(){ $(".div1").mouseover( function(e){ e.stopPropagation(); $(".div2").show(); } ); $(".div1").mouseout( function(e){ e.stopPropagation(); $(".div2").toggle(); } ); } ); </script>
看完上述内容,你们掌握如何解决两个div叠加触发事件发生闪烁的问题的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。