今天遇到一個問題,想實現一個功能:
當鼠標移到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部分:
<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>