今天給同學(xué)寫(xiě)一個(gè)相冊(cè)照片鼠標(biāo)浮動(dòng)顯示細(xì)節(jié)的效果，遇到了閃動(dòng)的bug，
也順利解決，就寫(xiě)下來(lái)跟大家分享。
我使用的是‘標(biāo)簽：hover + 標(biāo)簽’的形式，如果使用jquery的
mouseover、mouseout等事件，也可以參考此方法，原理一樣。
分析：圖片使用,然后使用div+span寫(xiě)入鼠標(biāo)浮動(dòng)要顯示的文字和背景。
如下代碼：（會(huì)出現(xiàn)閃動(dòng)）
html代碼：
1 <img src="1.jpg"> 2 <div> 3 <span>圖片1</span> 4 <span>姓名</span> 5 </div>
css代碼：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 img,div{/*注意圖片跟div大小要一致，位置要重合*/ 6 width: 200px; 7 height: 200px; 8 } 9 div{/*設(shè)置好div位置后，設(shè)為隱藏*/ 10 background-color: rgba(242, 242, 242, 0.7); 11 position: absolute; 12 margin-top: -203px; 13 display: none; 14 } 15 /*出現(xiàn)bug位置*/ 16 img:hover + div{/*鼠標(biāo)浮動(dòng)到img，讓后面緊跟的div的display樣式改為顯示block*/ 17 display: block; 18 cursor: pointer; 19 } 20 span{ 21 display: inline-block; 22 margin-bottom: 15px; 23 margin-left: 70px; 24 } 25 span:nth-of-type(1){ 26 margin-top: 50px; 27 }
思考鼠標(biāo)浮動(dòng)的流程，是鼠標(biāo)一到img上，div就顯示，但是要注意，div顯示以后，
鼠標(biāo)雖然看起來(lái)還在圖片的區(qū)域內(nèi)， 但是鼠標(biāo)hover的元素已經(jīng)變?yōu)槌霈F(xiàn)的div，所以
此時(shí)就會(huì)div繼續(xù)回到display：none;，循環(huán)往復(fù)，就會(huì)不停閃動(dòng)。
所以要加一個(gè)樣式，就是鼠標(biāo)浮動(dòng)到div，也要修改div的display 樣式為block。
可以直接加入出現(xiàn)bug位置的代碼（加‘,div : hover’），代碼如下：
img:hover + div, div : hover{ display: block; cursor: pointer; }
這樣相片浮動(dòng)效果就完美了~
如有錯(cuò)誤，請(qǐng)您指正！
【 微信掃一掃 】
