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

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

更新：

我解决了这个问题。我为 just 制作了一个新的 CSS 样式集，.tab并放入了过渡 AND top: 0px。

Answer 1

与其放在 上:hover，不如放在transition上.tab。