4

再会

我在悬停选择器上使用 CSS 过渡效果，但过渡的第二部分不平滑 - 当我将鼠标悬停在元素上时，它会平滑移动。当我退出悬停时，元素不优雅地回落（不平滑/定时）。我如何解决它？

#login{
    margin-top: -10px;
    margin-left: 10px;
    display: inline-block;
}

#login:hover {
     margin-top: 0px;
     -webkit-transition: margin-top 0.2s ease-out;
     -moz-transition: margin-top 0.2s ease-out;
     -o-transition: margin-top 0.2s ease-out;
     -ms-transition: margin-top 0.2s ease-out;
 }
#login a{
    background: #003399;
    font-size: 38px;
    color: #fff;
}
<div id="login" class="span1"> 
  <a href="#">login</a>
</div>

注意：查看我的JSFIDDLE以了解我的意思

4

2 回答 2

5

一旦你离开 div， :hover 伪类就不再满足。因此 div 失去了过渡属性。

只需将转换块从 #login:hover 移动到 #login 即可。

于 2013-02-20T11:55:13.643 回答
3

您还必须定义过渡到正常状态。

编辑：就像拉斐尔所说的，只需要在正常状态下定义过渡效果

#login{
    margin-top: -10px;
    margin-left: 10px;
    display: inline-block;
    -webkit-transition: margin-top 0.2s ease-out;
       -moz-transition: margin-top 0.2s ease-out;
         -o-transition: margin-top 0.2s ease-out;
        -ms-transition: margin-top 0.2s ease-out;
}

#login:hover {
     margin-top: 0px;
}

#login a{
    background: #003399;
    font-size: 38px;
    color: #fff;
}
<div id="login" class="span1"> 
  <a href="#">login</a>
</div>

演示

于 2013-02-20T11:51:38.607 回答