今天给同学写一个相册照片鼠标浮动显示细节的效果,遇到了闪动的bug,也顺利解决,就写下来跟大家分享。
我使用的是‘标签:hover + 标签’的形式,如果使用jquery的mouseover、mouseout等事件,也可以参考此方法,原理一样。
分析:图片使用,然后使用div+span写入鼠标浮动要显示的文字和背景。如下代码:(会出现闪动)
html代码:
1 <img src='/images/loading.gif' data-original="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;}
这样相片浮动效果就完美了~
如有错误,请您指正!
原标题:img的hover事件闪动
关键词: