前段时间写鼠标悬停元素上移效果时,当鼠标恰好放在元素边缘时,chrome出现一直上下移动的问题,其他浏览器表现正常。原因尚不知,可能是实现方式不对吧(PS:使用top实现),虽然不知道原因,但是问题还是要解决的,分享一个能绕开的实现方式。
说到鼠标悬停元素上移,首先想到的是鼠标悬停时元素上移,然后应用transition来实现渐变效果。
1、使用top实现(该实现方式chrome浏览器闪烁,避免使用)
<!--html--><divclass="test"></div>/*css*/ .test {position: relative;top: 0; transition: top 0.5s;}.test:hover{top: -10px;}
2、使用transform实现(推荐)
<!--html--><divclass="test"></div>/*css*/ .test {transform: translateY(0);transition: transform 0.5s;}.test:hover{transform: translateY(-10px);}
援:http://www.daqianduan.com/6597.html/comment-page-1