好的,所以,这是我的代码:
$(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 - .css() 的 jQuery 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24184885/