img的hover事件閃動

今天給同學寫一個相冊照片滑鼠浮動顯示細節的效果，遇到了閃動的bug，也順利解決，就寫下來跟大家分享。

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

分析：圖片使用,然後使用div+span寫入滑鼠浮動要顯示的文字和背景。如下代碼：（會出現閃動）

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{/*設置好div位置後，設為隱藏*/
10 　　background-color: rgba(242, 242, 242, 0.7);
11 　　position: absolute;
12 　　margin-top: -203px;
13 　　display: none;
14 }
15 /*出現bug位置*/
16 img:hover + div{/*滑鼠浮動到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 }

思考滑鼠浮動的流程，是滑鼠一到img上，div就顯示，但是要註意，div顯示以後，滑鼠雖然看起來還在圖片的區域內， 但是滑鼠hover的元素已經變為出現的div，所以此時就會div繼續回到display：none;，迴圈往複，就會不停閃動。
所以要加一個樣式，就是滑鼠浮動到div，也要修改div的display 樣式為block。可以直接加入出現bug位置的代碼（加‘,div : hover’），代碼如下：

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

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

如有錯誤，請您指正！