如何解決兩個(gè)div疊加觸發(fā)事件發(fā)生閃爍的問題，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、合山網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

于是開始找問題根源，發(fā)現(xiàn)原來是因?yàn)楫?dāng)我們觸發(fā)div1的時(shí)候，div2出現(xiàn)，但是div2是存在于div1上面的，所以當(dāng)div2出現(xiàn)后，會(huì)又一次觸發(fā)下面div1的事件。通常我們可能給的事件是mouseover和mouseout，因?yàn)閮蓚€(gè)div疊加，div2出現(xiàn)時(shí)會(huì)多次觸發(fā)div1的事件，所以就會(huì)發(fā)生閃爍問題。

解決：

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

注：

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

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

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

注：

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

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

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

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

具體使用方法：

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

下面上代碼：

html部分：

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

1. <

2. div class="fudiv">