javascript - .css() 的 jQuery 问题

Question

好的，所以，这是我的代码:

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

如果我取出 .css("margin-bottom", "65px") 一切正常，div(.topbuttons) 在鼠标悬停时会变大。但是，每次 .topbuttons 高度增加时，.topbuttons 下方的 div 都会被下推。所以我想我可以将 .topbuttons 的底部边距降低 10px，因为我们将 .topbuttons 的大小增加了 10px。但是它似乎不起作用，我不知道为什么。请帮忙

Answer 1

我会用纯 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*/
}