javascript - jQuery与.css()的麻烦

好的，这是我的代码:

$(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。但是它似乎不起作用，我也不知道为什么。请帮忙

最佳答案

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

关于javascript - jQuery与.css()的麻烦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24184885/