解決css中hover做遮蓋罩閃動(dòng)問(wèn)題(推薦)

具體代碼如下所示:
<div id="div2"></div> <div id="div3"> <p>你好</p> </div>
這是html代碼部分,原本想做一個(gè)遮蓋罩的效果,當(dāng)鼠標(biāo)移動(dòng)到div2的時(shí)候,div3會(huì)出現(xiàn)微微遮一下div2.
所以最開(kāi)始的css代碼是這樣的
做完后發(fā)現(xiàn)出了一個(gè)問(wèn)題,那就是鼠標(biāo)移動(dòng)到div2的時(shí)候div3會(huì)不停的閃爍。這并不是我想要的效果,于是我去找了很多資料,終于找到了原因
原來(lái),當(dāng)鼠標(biāo)移動(dòng)到div2的時(shí)候,div3會(huì)出現(xiàn),這樣鼠標(biāo)就會(huì)在div3上,而不是在div2上面。于是div2又會(huì)消失,如此反復(fù)。
解決方法也很簡(jiǎn)單,將div2:hover代碼換成如下就能完美解決了。
最終效果如下
總結(jié)
以上所述是小編給大家介紹的解決css中hover做遮蓋罩閃動(dòng)問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
5種純CSS3鼠標(biāo)hover按鈕動(dòng)畫(huà)特效源碼
這是一套鼠標(biāo)hover按鈕動(dòng)畫(huà)特效代碼。5種效果,在結(jié)構(gòu)布局上使用flex來(lái)進(jìn)行布局,并通過(guò)css transition來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果,歡迎下載2017-04-10CSS3兩款鼠標(biāo)hover圖片懸停遮罩動(dòng)畫(huà)特效源碼
本特效是兩款效果非常炫酷的鼠標(biāo)hover圖片CSS3動(dòng)畫(huà)特效代碼。鼠標(biāo)hover圖片時(shí)會(huì)顯示制作說(shuō)明2017-03-27- 本文主要介紹了CSS3制作hover下劃線動(dòng)畫(huà)的方法步驟。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-27
- 本組是一套效果非常炫酷的純CSS3炫酷圓形導(dǎo)航菜單特效。在鼠標(biāo)hover主菜單時(shí),所有的子菜單會(huì)圍繞圓形主菜單依次出現(xiàn)2017-03-21
16種基于css3 Bootstrap圖片hover懸停遮罩效果
bootstrap-image-hover是一款基于Bootstrap的css3圖片hover效果。共16種特效遮罩,歡迎下載2017-03-13CaptionHover.CSS實(shí)現(xiàn)4種超酷鼠標(biāo)滑過(guò)圖片過(guò)渡動(dòng)畫(huà)特效源碼
CaptionHover.css是一組超酷CSS3鼠標(biāo)滑過(guò)圖片過(guò)渡動(dòng)畫(huà)特效的插件,共有4種效果,歡迎下載使用2016-08-12html5+css3鼠標(biāo)懸停hover超鏈接導(dǎo)航條特效源碼 21種
hover超鏈接導(dǎo)航條特效源碼是一個(gè)利用css3 transition屬性制作的21種不同的鼠標(biāo)懸停效果的代碼。鼠標(biāo)hover或懸停時(shí),會(huì)觸發(fā)各種動(dòng)畫(huà)效果2016-03-31