时间：2021-07-01 10:21:17 帮助过：71人阅读
我使用的是‘标签：hover + 标签’的形式，如果使用jquery的mouseover、mouseout等事件，也可以参考此方法，原理一样。
分析：图片使用,然后使用div+span写入鼠标浮动要显示的文字和背景。如下代码：（会出现闪动）
html代码：
1 <img src="1.jpg"> 2 <div> 3 <span>图片1span> 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; }
这样相片浮动效果就完美了~
如有错误，请您指正！