jQuery trouble with .css()

Question

Ok, so, heres my code:

$(document).ready(function() {
    $('.topbuttons').mouseenter(function() {
        $(this).css("margin-bottom", "65px").height(60).width(110);
    });
    $('.topbuttons').mouseleave(function() {
        $(this).height(50).width(100);
    });
});

If I take out the .css("margin-bottom", "65px") everything works perfectly, the div(.topbuttons) gets bigger when its moused over. However the div below .topbuttons is pushed down each time .topbuttons height is increased. So I figured I could lower the bottom margin on .topbuttons by 10px, because we are increasing .topbuttons size by 10px. However it doesn't seem to work and I have no clue why. Please help

Answer 1

I'd do it in pure CSS: jsBin demo

.topbuttons{
   /* OTHER STYLES HERE*/
   height: 60px;
   width: 110px;
   margin-bottom:65px;
   transition: all 0.4s; /* if you want to apply some animation :) */
}
.topbuttons:hover{
   height: 50px;
   width: 100px;
   margin-bottom:75px; /* increase margin bottom if you don't want
                          to make move the div below*/
}

Answer 2

use of .height and .width is wrong way with .css Try this:

   $(this).css({'margin-bottom':'65px', width: '110px', height: '60px' });

Answer 3

If problem is with margin-bottom then why you not separate that line.

$(document).ready(function() {
    $('.topbuttons').mouseenter(function() {
        $(this).css("margin-bottom", "65px");
        $(this).height(60).width(110);
    });
    $('.topbuttons').mouseleave(function() {
        $(this).height(50).width(100);
    });
});

Or remove jquery and do it with css

.topbuttons:hover{
    margin-bottom:65px;
    height:60px;
    width:100px;
}

I recommended second options...

Answer 4

I figured it out, my code ended up looking like this, in css: #topbuttonsrow a div:hover { color:maroon; background-color:#f05e35; height:60px; width:110px; margin:50px 25px 65px 25px;

#topbuttonsrow was a div around my 5 .topbuttons