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

【问题标题】：smooth fade out gone when i remove my mouse over the link当我将鼠标移到链接上时，平滑淡出消失了
【发布时间】：2015-04-10 16:52:29
【问题描述】：

我在博客主题上使用了 :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（就是右上角的链接）

【问题讨论】：

标签： html css css-transitions transition transitions

【解决方案1】：

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

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

这是因为未悬停的状态需要一些东西来转换，你当前的代码没有任何东西，所以 CSS 正在快速回到开头。

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

【讨论】：

【解决方案2】：

当您移除鼠标时它没有转换的原因是因为您将其设置为在悬停时添加边框底部，而不是转换颜色。您可以通过添加以下属性使其转入和转出：

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

这样，当您将鼠标悬停时，它会转换边框底部的颜色，而不是添加它。

【讨论】：

【解决方案3】：

为过渡添加一个动画类到你想要过渡的元素

.animate 
 { 
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
 }

现在，当您将此类添加到您的元素时，它将在悬停和悬停时进行转换。

【讨论】：