当鼠标悬停在图标上时，按钮文本模糊

Button text blurring when hovering over an icon

本文关键字：按钮 文本 模糊 鼠标 悬停 图标      更新时间：2023-09-26

当鼠标悬停在纸上时，我让它的图标抖动。然而，按钮下面的文字也有点模糊。我试着删除动画，当你把鼠标悬停在图标上时，文本仍然模糊(尽管图标没有做任何事情)。

动画的CSS: 

.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');
});

完整代码

我会在图标上添加震动，而不是整个div。

$('.plane').hover(function() {
    $(this).find('i').addClass('fa-shake');
}, function () {
    $(this).find('i').removeClass('fa-shake');
});

这似乎解决了问题- Codepen

相关文章：