页面批量使用类似hover效果时,内容闪烁

使用mouseenter+mouseleave,划过显示,滑出隐藏。内容过多出现滚动条时,有时候会出现内容闪烁的问题。

1.原因:
用display实现显示隐藏是占位的,display为none的时候是不占位置,而显示的时候又占了位置。尤其出现滚动条以后,更容易出现闪动的bug。

划过显示相应的信息框,滑出隐藏。

在这里插入图片描述
在这里插入图片描述
2、解决:
换为opacity控制显示,因为opacity不占位,不会影响滚动条的位置。

.hide{opacity:0;filter:alpha(opacity=0);}
.show{opacity:1;filter:alpha(opacity=100);}

但是还存在一个问题就是:只有当要显示隐藏的dom结构是定位实现的时候,就是也是不占位的结构才可以这么解决。
占位的结构还是有问题,这个还在解决中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值