1

トランジションを含むレイアウトがあり、スムーズにトランジションに入りますが、カーソルが選択した領域から外れると、突然最初の位置に戻ります。

}
#holder div:hover {
    width:92px;
    background-color:#dddddd;
    -webkit-transition:all .4s ease-out;
    -moz-transition:all .4s ease-out;
    -ms-transition:all .4s ease-out;
    -o-transition:all .4s ease-out;
    transition:all .4s ease-out;

それがコーディングです。元の形式にスムーズに戻すのを手伝ってくれる人はいますか? ありがとう！

4

1 に答える 1

2

このセレクターdivは、の子である a#holderが:hovered の場合にのみ一致します。

#holder div:hover {
    background-color: #DDD;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width: 92px;
}

つまり、トランジションは、div がホバーされている場合にのみ適用されます。ホバリングを停止するとすぐに、トランジションは適用されなくなり、スタイルは元に戻ります。

両方の方法で機能させるには、遷移宣言を#holder div次のように配置する必要があります。

#holder div {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
#holder div:hover {
    background-color: #DDD;
    width: 92px;
}
于 2012-11-29T18:20:51.063 に答える