今天遇到一個問題，想實現一個功能：

當鼠標移到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>

?

轉載于:https://www.cnblogs.com/hanyining/p/5470581.html

總結

以上是生活随笔為你收集整理的两个div叠加触发事件发生闪烁问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。