jQuery trouble with .css()

jQuery trouble with .css()

本文关键字：css with trouble jQuery      更新时间：2023-09-26

好的，下面是我的代码:

$(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*/
}

使用。height和。width是错误的。css试试这个:

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

如果是margin-bottom的问题，为什么不把这一行分开呢? 

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

或者删除jquery，使用css

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

我推荐第二个选项…

我弄明白了，我的代码最终看起来像这样，在css中:#topbuttonsrow adiv:hover {颜色:栗色;background - color: # f05e35;高度:60 px;宽度:110 px;Margin:50px; 25px;

# topbuttonrow是我的5 .topbuttons周围的一个div

相关文章：