Basically i am trying to have different transition time when the item is hovered than when the item is mouse leaved,
#bar{ position:fixed; bottom:-25px; } /*here you only get to see a piece of the bar */
#bar:hover{ transform: .2s linear; bottom:0; }
And something like
/*this only represents my made out status to cover what i need*/
#bar:mouseLeaved{ transform: 2s linear }
This way it would take .2 seconds to be shown and 2 seconds to be hidden
Can i do this with no need of javascript?
I'd suggest this:
#bar { transition: 2s linear; }
#bar:hover { transition: .2s linear; }
And, let the ordering of the CSS handle things for you when :hover is in effect (it will override the other).
Working demo here: http://jsfiddle.net/jfriend00/Hufxa/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With