CSS 过渡问题

Question

我正在尝试让选项卡（作为菜单）偏移屏幕，当有人将鼠标悬停在它上面时，它会向下过渡以显示更多选项卡。我的代码是这样的：

.tab:hover {
    position: relative; 
    top: 45px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

当我将鼠标悬停在图像上时，它会正确地向下过渡。但是，当我离开选项卡时，它会弹回原位。我想要它做的是过渡回原来的位置，而不是快照。为了实现这一点，我从代码中遗漏了什么？

更新：

我发现了问题所在。我为 .tab 制作了一个新的 CSS 样式集，并添加了过渡 AND top: 0px。

Answer 1

不要把它放在:hover上，而是把transition放在.tab上。