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

如何解決兩個div疊加觸發(fā)事件發(fā)生閃爍的問題，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(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的樣式設(shè)置為display：block;于是就順利解決了這個問題，不會再出現(xiàn)閃爍問題。

下面上代碼：

html部分：

XML/HTML Code復制內(nèi)容到剪貼板

1. <

2. 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復制內(nèi)容到剪貼板

1. .fudiv:hover .div2 {   
            display: block;   
   }   
     
   .div2{   
             display: none;   
   }  
   原本jquery部分，這種方式會出現(xiàn)閃爍問題
   JavaScript Code復制內(nèi)容到剪貼板
   <script>   
       $(document).ready(   
               function(){   
                   $(".div1").mouseover(   
                           function(e){   
                               e.stopPropagation();   
                               $(".div2").show();   
                           }   
                   );   
                   $(".div1").mouseout(   
                           function(e){   
                               e.stopPropagation();   
                               $(".div2").toggle();   
                           }   
                   );   
               }   
       );   
   </script>

看完上述內(nèi)容，你們掌握如何解決兩個div疊加觸發(fā)事件發(fā)生閃爍的問題的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！