CSS3: Change DIV CSS onhover (:active, :focus, :disabled, :checked)

You can do this by jquery but there is an easier way to change Div CSS by using CSS3: transition

Support: Firefox (-moz-), Chrome (-webkit-), Opera (-o-), Safari (-webkit-), IE10 (-ms-)

My example is about changing max-height of a DIV from 200px to 400px on hover, also after 5 seconds the DIV max-height will roll back to previous position:

#my-example { 
    max-height: 200px; 
    overflow:hidden; 
    -webkit-transition: .5s all; 
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all; 
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all; 
    -ms-transition-delay: 5s; 
    -o-transition: .5s all; 
    -o-transition-delay: 5s; 
    transition: .5s all; 
    transition-delay: 5s; 
} 

#my-example:hover { 
    max-height:400px; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    -transition-delay: 0s; 
}

Demo:http://jsfiddle.net/j3Azt/

You can do the same with :active, :focus, :disabled, :checked event.

Thanks.

Written on 02 February 2013

Read more on CSS3 transition

Share your thoughts