Tag Archives: CSS3

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.