Expand div on hover

i tried doing it with css, the closest i got was: http://jsfiddle.net/XyDec/ It kind of works, but don't hide the conte开发者_如何学Pythonnt inside it and i would like some smooth animation , so i guess it's scripts time. i can't write them or don't know where to look for them, could anybody help me ?

you may take a look at the jquery javascript framework (user friendly and powerfull) here is an example of smooth slide down of div using jquery:

http://api.jquery.com/slideDown/

this is made with one line : $("div").slideDown("slow");

hope it help

Have you tried jQuery? You can treat the div as an object and assign an action to an event, through jQuery methods.

For instance:

function hide(){
$('#the-div').hide('slow')
}

Then you just call the function on the hover event.

If you want to go a step further, you can assign a timer for it to show again. Or even use a callback.

function hide(){
var x = $('#the-div')
$('#the-div').hide('slow', function(x){
    //do something with the variable x
    })
}

I think that should work.

Hope that helps.

Cheers.