img的hover事件闪动

2018-06-24 00:28:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

今天给同学写一个相册照片鼠标浮动显示细节的效果,遇到了闪动的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;
}

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

如有错误,请您指正!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:垂直水平居中

下一篇:雪碧图应用