img的hover事件閃動

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

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

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

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

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

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

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

如有錯誤，請您指正！