前段时间写鼠标悬停元素上移效果时,当鼠标恰好放在元素边缘时,chrome出现一直上下移动的问题,其他浏览器表现正常。原因尚不知,可能是实现方式不对吧(PS:使用top实现),虽然不知道原因,但是问题还是要解决的,分享一个能绕开的实现方式。
说到鼠标悬停元素上移,首先想到的是鼠标悬停时元素上移,然后应用transition来实现渐变效果。
1、使用top实现(该实现方式chrome浏览器闪烁,避免使用)
<!--html--> <div class="test"></div> /*css*/ .test { position: relative; top: 0; transition: top 0.5s; } .test:hover{ top: -10px; }
2、使用transform实现(推荐)
<!--html--> <div class="test"></div> /*css*/ .test { transform: translateY(0); transition: transform 0.5s; } .test:hover{ transform: translateY(-10px); }
你试用定位,在hover的时候dom已经不在原位置了,也就是移动以后hover状态已经不存在所以会有“闪烁”现象。而transfrom只是视觉位移,dom其实还在原位。事实上在外层多加一个父元素,将hover状态写在这个父元素上去控制子元素定位变化,就能避免这个问题。
股份大股东
用这个方法写出来的在safari浏览器中会闪烁,求解
.box{
position: relative;
left: 10px;
width: 20px;
height: 30px;
background: red;
transform: translateY(30px);
transition: transform 2s linear;
-webkit-transform:translateY(30px);
-webkit-transition:-webkit-transform 2s linear;
}
.box:hover{
transform: translateY(0);
-webkit-transform:translateY(0);
}
position用于布局,transform用于变化(动画)
发的规划规划
测试了一下,我这边(macOS 10.13.3 High Sierra)在 Chrome (65.0.3325.181) 里用 transition 是正常的。是不是 Chrome 版本的问题?