当鼠标移到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复制内容到剪贴板
  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.stopPropagation();   
  7.                             $(".div2").show();   
  8.                         }   
  9.                 );   
  10.                 $(".div1").mouseout(   
  11.                         function(e){   
  12.                             e.stopPropagation();   
  13.                             $(".div2").toggle();   
  14.                         }   
  15.                 );   
  16.             }   
  17.     );   
  18. </script>  

以上这篇两个div叠加触发事件发生闪烁问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

原文地址:http://www.cnblogs.com/hanyining/p/5470581.html

标签:
div,叠加,触发事件,闪烁

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。