css3转换:悬停在“输入”和“输出”时的时间值不同

Question

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

#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的情况下做到这一点吗？

Answer 1

我建议这样做：

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

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

在此处进行演示：http://jsfiddle.net/jfriend00/Hufxa/