4

良い一日

ホバーセレクターでCSSトランジション効果を使用していますが、トランジションの2番目の部分がスムーズではありません-要素にカーソルを合わせると、スムーズに移動します。ホバーを終了すると、要素はエレガントではなくドロップバックします（スムーズ/タイミングが合わない）。どうすれば修正できますか？

#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 に答える