1

ホバー時に Chrome(24.0.1312.57) でトランジションを適用すると、マウス アウト時に背景色が更新されません。このフィドルを参照してください: http://jsfiddle.net/WKVJ9/ コードは次のとおりです。

.transition{
     -webkit-transition: all 500ms ease-in-out;
}
.wrapper{
    width:200px;
    height:200px;
    display:block;
    background-color:cyan;
    position:relative;

}
.hoverme{
    border-radius:90px;
    display: block;
    width:50px;
    height:50px;
    top:50px;
    right:-90px;
    position:absolute;
    -webkit-transform: rotate(-45deg);

}
.wrapper:hover .hoverme{
     -webkit-transform: rotate(0deg);
    right:0;
}
.hoverme:hover{
    background-color:red;
}

およびhtml：

<div class="wrapper">
    <div class="hoverme transition">
       Hover me
    </div>
</div>

.wrapper と .hoverme をホバーしてからマウスをこのボックスから離すと、.hoverme 要素は回転と位置のみをアニメーション化します。

私が取り組んでいるサイトでは、ホバー状態も更新されないため、アニメーションが終了しても背景が :hover background-color のままになる...何らかの理由でここで再現できない

背景をアニメーションにすることはできますか？

4

1 に答える 1

1

これは、.hoverme の position:absolute が原因で発生しています

position:relative add margin-left:150px; に変更してみてください。(または必須) .hoverme の位置を修正するには ... 次のようにします。

.hoverme{
    border-radius:90px;
    display: block;
    width:50px;
    height:50px;
    top:50px;
    right:-90px;
    position:relative;
    margin-left:150px;
    -webkit-transform: rotate(-45deg);

}

ここで動作を確認してください：http://jsfiddle.net/WKVJ9/1/

于 2013-02-13T16:46:56.397 に答える