Javascript 将鼠标悬停在图标上时按钮文本模糊
我使纸上计划的图标在悬停时晃动。但是,下面按钮上的文本也有点模糊。我尝试删除动画,当您将鼠标悬停在图标上时,文本仍然模糊(尽管图标没有做任何事情) 动画的CSS:Javascript 将鼠标悬停在图标上时按钮文本模糊,javascript,jquery,css,Javascript,Jquery,Css,我使纸上计划的图标在悬停时晃动。但是,下面按钮上的文本也有点模糊。我尝试删除动画,当您将鼠标悬停在图标上时,文本仍然模糊(尽管图标没有做任何事情) 动画的CSS: .fa-shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @ke
.fa-shake {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
jQuery:
$('.plane').hover(function() {
$(this).addClass('fa-shake');
}, function () {
$(this).removeClass('fa-shake');
});
如果需要的话。我会在图标中添加shake,而不是整个div
$('.plane').hover(function() {
$(this).find('i').addClass('fa-shake');
}, function () {
$(this).find('i').removeClass('fa-shake');
});
这似乎解决了问题-在chrome中它仍然存在。