欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

兩個div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法

  發(fā)布時間：2016-05-09 17:06:59   作者：佚名   我要評論
下面小編就為大家?guī)硪黄獌蓚€div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

當鼠標移到div1上的時候，會出現(xiàn)div2。出現(xiàn)時div2在div1的上面，div2在出現(xiàn)后發(fā)生閃爍的問題。

于是開始找問題根源，發(fā)現(xiàn)原來是因為當我們觸發(fā)div1的時候，div2出現(xiàn)，但是div2是存在于div1上面的，所以當div2出現(xiàn)后，會又一次觸發(fā)下面div1的事件。通常我們可能給的事件是mouseover和mouseout，因為兩個div疊加，div2出現(xiàn)時會多次觸發(fā)div1的事件，所以就會發(fā)生閃爍問題。

解決：

1.一開始換mouseenter和mouseleave，但是發(fā)現(xiàn)還是一樣的問題。

注：

mouseover()與mouseout()   表示鼠標移入和移出的時候觸發(fā)，穿過子元素也會觸發(fā)

mouseenter()和mouseleave()   表示鼠標穿過和穿出時候觸發(fā)，穿過子元素不會觸發(fā)
 

2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默認事件，還是沒有對癥。

注：

e.stopPropagation();   //阻止冒泡之后，就不會形成冒泡向上傳遞了。

e.preventDefault();    //阻止默認行為

3.最后換為切換事件toggle切換事件也不頂事兒。

4.最終，如果想用js解決這個問題可能不容易，用js基本都會發(fā)生閃爍問題。那么我們使用css方式是不是可以解決呢？網(wǎng)上查了很多資料，發(fā)現(xiàn)也有很多人遇到這個問題，使用的是css中的hover來解決的。

具體使用方法：

給兩個div的父元素，也就是共同包裹兩個div的盒子一個hover，當父元素hover時，div2的樣式設置為display：block;于是就順利解決了這個問題，不會再出現(xiàn)閃爍問題。

下面上代碼：

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部分，這種方式會出現(xiàn)閃爍問題

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疊加觸發(fā)事件發(fā)生閃爍問題的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

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

相關文章

  • DIV+CSS 清除浮動常用方法總結

    下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動常用方法總結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-06

  • CSS教程之div垂直居中的多種方法

    這篇文章主要為大家詳細介紹了CSS教程之div垂直居中的多種方法，還包括多行文本垂直居中的方法，感興趣的小伙伴們可以參考一下
    2016-05-05

  • 關于div與>div的區(qū)別小結

    下面小編就為大家?guī)硪黄P于div與>div的區(qū)別小結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-04

  • Divxdra1031.Dll

    Divxdra1031.Dll
    2016-04-30

  • 圖片溢出div問題的快速解決方法推薦

    圖片溢出div問題怎么解決？下面小編就為大家?guī)硪黄獔D片溢出div問題的快速解決方法推薦。希望對大家有所幫助。一起跟隨小編過來看看吧
    2016-04-28

  • 如何讓一個div居于頁面正中間【實現(xiàn)方法】

    下面小編就為大家?guī)硪黄绾巫屢粋€div居于頁面正中間【實現(xiàn)方法】。小編覺得挺不錯的，現(xiàn)在分享個大家，也給大家做個參考
    2016-04-15

  • css三種方法實現(xiàn)div在瀏覽器水平居中

    這篇文章主要介紹了css三種實現(xiàn)div在瀏覽器水平居中的方法，感興趣的小伙伴們可以參考一下
    2016-04-14

  • 一個div在瀏覽器水平居中的實現(xiàn)方法

    下面小編就為大家?guī)硪黄粋€div在瀏覽器水平居中的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。
    2016-04-14

  • div+CSS制作類似微信對話氣泡效果的實例總結

    這篇文章主要介紹了div+CSS制作類似微信對話氣泡效果的實例總結,文中總結出了四種編寫方式,并且對三角形的繪制有一個補充說明,需要的朋友可以參考下
    2016-04-01

最新評論