html - 过渡，我很困惑

Question

我有一个包含过渡的布局，它们顺利进入该过渡，但一旦光标离开所选区域，它们就会突然回到第一个位置。

}
#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;

这就是它的编码，谁能帮我把它顺利地恢复到原来的形式？谢谢!

Answer 1

此选择器仅在 #holder 的子元素 div 被 :hover 时匹配。

#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;
}