Question

Hey all, I’ve been beating my head against the search engine walls for a couple hours now and figure I might as well just ask…

I need to build a div that is one size on blur, say 300×30, that expands to 300×300 on hover and pushes all content below it down and will revert to the 300×30 size when blurred (“no longer hovered” or whatever you kids are calling it now-a-days lol) again. Can someone point me to some resources or even give me some code bits to play with? It’d be much appreciated!

Answer 1

You can use Psuedo-classes in CSS if you don’t want an animation.

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}​

Live Example

http://jsfiddle.net/aFUmS/

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});​

jQuery example if you want animation

http://jsfiddle.net/CvhkM/