Question

我在我的博客主题上使用了：悬停转换。当我悬停在它上面时，它很流畅，但当我移除鼠标时，淡出过渡不再平滑。这是我的代码：

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.

Answer 2

移除鼠标时未转换的原因是因为您将其设置为在悬停时添加边框底部，而不是转换颜色。您可以通过添加以下属性来进行转换：

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

当你将鼠标移过时，它会转换边框底部的颜色，而不是添加它。

Answer 3

for transition将animate类添加到要转换的元素

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

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

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

3 个答案: