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; 
}

这样相片浮动效果就完美了~

如有错误，请您指正！