css3 过渡：不同的时间值：hover In 而不是 Out？答案

【问题标题】：css3 transition: different time value when :hover In than Out?css3 过渡：不同的时间值：hover In 而不是 Out？
【发布时间】：2012-01-15 01:00:50
【问题描述】：

基本上我试图在项目悬停时与鼠标离开时有不同的过渡时间，

#bar{ position:fixed; bottom:-25px; }  /*here you only get to see a piece of the bar    */

#bar:hover{ transform: .2s linear; bottom:0; }

类似的东西

/*this only represents my made out status to cover what i need*/
#bar:mouseLeaved{ transform: 2s linear }

这样显示需要 0.2 秒，隐藏需要 2 秒

我可以在不需要 javascript 的情况下做到这一点吗？

【问题讨论】：

【解决方案1】：

我建议这样做：

#bar { transition: 2s linear; }
#bar:hover { transition: .2s linear; }

并且，当 :hover 生效时，让 CSS 的排序为您处理事情（它将覆盖另一个）。

【讨论】：