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

當(dāng)鼠標(biāo)移到div1上的時(shí)候,會出現(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)后,會又一次觸發(fā)下面div1的事件。通常我們可能給的事件是mouseover和mouseout,因?yàn)閮蓚€div疊加,div2出現(xiàn)時(shí)會多次觸發(fā)div1的事件,所以就會發(fā)生閃爍問題。
解決:
1.一開始換mouseenter和mouseleave,但是發(fā)現(xiàn)還是一樣的問題。
注:
mouseover()與mouseout() 表示鼠標(biāo)移入和移出的時(shí)候觸發(fā),穿過子元素也會觸發(fā)
mouseenter()和mouseleave() 表示鼠標(biāo)穿過和穿出時(shí)候觸發(fā),穿過子元素不會觸發(fā)
2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默認(rèn)事件,還是沒有對癥。
注:
e.stopPropagation(); //阻止冒泡之后,就不會形成冒泡向上傳遞了。
e.preventDefault(); //阻止默認(rèn)行為
3.最后換為切換事件toggle切換事件也不頂事兒。
4.最終,如果想用js解決這個問題可能不容易,用js基本都會發(fā)生閃爍問題。那么我們使用css方式是不是可以解決呢?網(wǎng)上查了很多資料,發(fā)現(xiàn)也有很多人遇到這個問題,使用的是css中的hover來解決的。
具體使用方法:
給兩個div的父元素,也就是共同包裹兩個div的盒子一個hover,當(dāng)父元素hover時(shí),div2的樣式設(shè)置為display:block;于是就順利解決了這個問題,不會再出現(xiàn)閃爍問題。
下面上代碼:
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部分,這種方式會出現(xiàn)閃爍問題
- <script>
- $(document).ready(
- function(){
- $(".div1").mouseover(
- function(e){
- e.stopPropagation();
- $(".div2").show();
- }
- );
- $(".div1").mouseout(
- function(e){
- e.stopPropagation();
- $(".div2").toggle();
- }
- );
- }
- );
- </script>
以上這篇兩個div疊加觸發(fā)事件發(fā)生閃爍問題的解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/hanyining/p/5470581.html
相關(guān)文章
- 下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動常用方法總結(jié)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-06
- 這篇文章主要為大家詳細(xì)介紹了CSS教程之div垂直居中的多種方法,還包括多行文本垂直居中的方法,感興趣的小伙伴們可以參考一下2016-05-05
關(guān)于div與>div的區(qū)別小結(jié)
下面小編就為大家?guī)硪黄P(guān)于div與>div的區(qū)別小結(jié)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-04- Divxdra1031.Dll2016-04-30
- 圖片溢出div問題怎么解決?下面小編就為大家?guī)硪黄獔D片溢出div問題的快速解決方法推薦。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-28
如何讓一個div居于頁面正中間【實(shí)現(xiàn)方法】
下面小編就為大家?guī)硪黄绾巫屢粋€div居于頁面正中間【實(shí)現(xiàn)方法】。小編覺得挺不錯的,現(xiàn)在分享個大家,也給大家做個參考2016-04-15css三種方法實(shí)現(xiàn)div在瀏覽器水平居中
這篇文章主要介紹了css三種實(shí)現(xiàn)div在瀏覽器水平居中的方法,感興趣的小伙伴們可以參考一下2016-04-14- 下面小編就為大家?guī)硪黄粋€div在瀏覽器水平居中的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。2016-04-14
div+CSS制作類似微信對話氣泡效果的實(shí)例總結(jié)
這篇文章主要介紹了div+CSS制作類似微信對話氣泡效果的實(shí)例總結(jié),文中總結(jié)出了四種編寫方式,并且對三角形的繪制有一個補(bǔ)充說明,需要的朋友可以參考下2016-04-01