97免费在线观看视频 I 午夜夫妻视频 I 久久久久久网站 I 天堂网男人 I 欧美大波大乳人奶 I 丝袜 中出 制服 人妻 美腿 I 窝窝午夜理论片影院 I 日韩在线伦理电影 I 韩国特级毛片 I 亚洲欧美另类激情 I 在线成人日韩 I 麻豆视频免费看 I 黄色生活毛片 I 极品一线天小嫩嫩真紧 I 色久天堂 I 久久久久久黄色片 I 林智妍三级露全乳电影视频 I 大肉大捧一进一出好爽视频 I 空乘伦理hd I 少妇口述与子做过爱 I 成人免费影片 I 国产精品国内免费一区二区三区 I 日韩制服一区 I 青青草福利在线 I 日本在线观看不卡视频 I 婷婷六月综合亚洲 I 国产又粗又黄又硬 I 美女扒开屁股让男子桶爽 I 欧美性午夜视频观看 I 欧美狠狠插 I 亚洲福利在线观看视频 I 无码抽搐高潮喷水流白浆 I 亚洲欧美国产日韩色伦 I 你懂的视频网站在线观看 I www.蜜桃视频在线观看 I 日本无码人妻精品一区二区蜜桃 I 久久中文字幕人妻丝袜 I 碰草在线视频 I 日韩精品成人av网站

今天給同學(xué)寫一個相冊照片鼠標(biāo)浮動顯示細(xì)節(jié)的效果，遇到了閃動的bug，
也順利解決，就寫下來跟大家分享。

我使用的是‘標(biāo)簽：hover + 標(biāo)簽’的形式，如果使用jquery的
mouseover、mouseout等事件，也可以參考此方法，原理一樣。

分析：圖片使用,然后使用div+span寫入鼠標(biāo)浮動要顯示的文字和背景。
如下代碼：（會出現(xiàn)閃動）

html代碼：

<img src="1.jpg"> 
<div>  
　　<span>圖片1</span> 
　　<span>姓名</span> 
</div>

css代碼：

*{ 
　　margin: 0; 
　　padding: 0; 
} 
img,div{/*注意圖片跟div大小要一致，位置要重合*/ 
　　width: 200px; 
　　height: 200px; 
} 
div{/*設(shè)置好div位置后，設(shè)為隱藏*/ 
　　background-color: rgba(242, 242, 242, 0.7); 
　　position: absolute; 
　　margin-top: -203px; 
　　display: none; 
} 
/*出現(xiàn)bug位置*/ 
img:hover + div{/*鼠標(biāo)浮動到img，讓后面緊跟的div的display樣式改為顯示block*/ 
　　display: block; 
　　cursor: pointer; 
} 
span{ 
　　display: inline-block; 
　　margin-bottom: 15px; 
　　margin-left: 70px; 
} 
span:nth-of-type(1){ 
　　margin-top: 50px; 
}

思考鼠標(biāo)浮動的流程，是鼠標(biāo)一到img上，div就顯示，但是要注意，div顯示以后，
鼠標(biāo)雖然看起來還在圖片的區(qū)域內(nèi)， 但是鼠標(biāo)hover的元素已經(jīng)變?yōu)槌霈F(xiàn)的div，所以
此時就會div繼續(xù)回到display：none;，循環(huán)往復(fù)，就會不停閃動。
所以要加一個樣式，就是鼠標(biāo)浮動到div，也要修改div的display 樣式為block。
可以直接加入出現(xiàn)bug位置的代碼（加‘,div : hover’），代碼如下：

img:hover + div, div : hover{ 
　　display: block; 
　　cursor: pointer; 
}

這樣相片浮動效果就完美了~

如有錯誤，請您指正！