html - 当我将鼠标移到链接上时，平滑淡出消失了

Question

我在我的博客主题上使用了 :hover 过渡。当我将鼠标悬停在上面时，它很平滑，但是当我移开鼠标时，淡出过渡不再平滑。这是我的代码:

a.lo{
text-decoration: none;
border-top: none;
letter-spacing: 1px;
-webkit-transition: all 1s;
-moz-transition: all 1s;}

a.lo:hover{
color:#fff;
letter-spacing: 1px;
background: none;
border-top: none;
padding-bottom: 16px;
border-bottom: 2px solid #fff;}

我的博客是here (就是右上角的链接)

Answer 1

将以下内容添加到您未悬停的类中 -

a.lo {
  border-bottom: 2px solid transparent; 
}

这是因为未悬停状态需要一些东西来转换，您当前的代码什么都没有，所以 CSS 会快速回到开头。

Here's a JSFiddle that you can go off of.