兩個div疊加觸發事件發生閃爍問題


今天遇到一個問題,想實現一個功能:

當鼠標移到div1上的時候,會出現div2。出現時div2在div1的上面,div2在出現后發生閃爍的問題。

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

解決:

1.一開始換mouseentermouseleave,但是發現還是一樣的問題。

注:

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部分:

 

<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部分:

.fudiv:hover .div2 {
         display: block;
}

.div2{
          display: none;
}

原本jquery部分,這種方式會出現閃爍問題

<script>
    $(document).ready(
            function(){
                $(".div1").mouseover(
                        function(e){
                            e.stopPropagation();
                            $(".div2").show();
                        }
                );
                $(".div1").mouseout(
                        function(e){
                            e.stopPropagation();
                            $(".div2").toggle();
                        }
                );
            }
    );
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM