诺禾-诺禾科技-chrome transition闪烁BUG

前段时间写鼠标悬停元素上移效果时,当鼠标恰恰放在元素边缘时,chrome呈现不断上下挪动的问题,其他阅读器表现正常。缘由尚不知,可能是完成方式不对吧(PS:运用top完成),固然不晓得缘由,但是问题还是要处理的,分享一个能绕开的完成方式。

说到鼠标悬停元素上移,首先想到的是鼠标悬停时元素上移,然后应用transition来完成突变效果。

1、运用top完成(该完成方式chrome阅读器闪烁,防止运用)
/*css*/ .test { position: relative; top: 0; transition: top 0.5s; } .test:hover{ top: -10px; } 2、运用transform完成(引荐)
/*css*/ .test { transform: translateY(0); transition: transform 0.5s; } .test:hover{ transform: translateY(-10px); }

猜你喜欢

转载自blog.csdn.net/yyone123/article/details/106265154