首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > html教程

img的hover事件闪动

原创
2016-10-10 11:40:54 1644浏览

今天给同学写一个相册照片鼠标浮动显示细节的效果，遇到了闪动的bug，也顺利解决，就写下来跟大家分享。

我使用的是‘标签：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;
}

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

如有错误，请您指正！

img的hover事件闪动PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：网站换肤 下一条：padding/border与width的关系

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！