html - 悬停时按钮下方出现奇怪的线条

Question

大家，我已经创建了这些按钮，当你将鼠标悬停在它们上面时会产生动画。动画一切正常，我希望它如何正常工作，但由于某种原因，每次你将鼠标悬停在任何按钮上时，下方都会出现一条奇怪的白线。它很微弱，但非常明显。我只是想知道它为什么会这样做，以及我能做些什么来阻止它。代码可以在这个codepen中查看

当我添加以下一点 css 时，问题就开始了。有可能解决问题吗？先感谢您。

.hero-content li:hover {    
  transform: translateY(-50px) scale(1) !important; 
  -webkit-filter: blur(0) !important;
  -moz-filter: blur(0) !important;
  -o-filter: blur(0) !important;
  -ms-filter: blur(0) !important;
  filter: blur(0) !important;
  opacity: 1 !important;
}

.hero-content:hover li {    
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  transform: scale(.97);
  opacity: .9;
}

标签： htmlcsscss-animations

Answer 1

从Codepen中删除以下 CSS 属性后，问题已修复

 -webkit-filter: blur(2px);

 filter: blur(2px);