hide div when mouseout

Question

I have two div\'s, one for short summary and one for long summary.
When I \"mouseover\" on the short summary, the short summary disappears and the long summary appears.<

Answer 1

Do this way:-

HTML:

    
 Short summary 
 Second Row
 
    
 Long Summary 
 Second Row
 Third Row 
 Fourth Row

JQuery:

$(".main")
    .mouseenter(
        function() {
            $(this+".long").show();
            $(this+".short").hide();
        })
    .mouseleave(
        function() {
            $(this+".short").show();
            $(this+".long").hide();
        });

Refer LIVE DEMO