所以我遇到这个问题,我的社交媒体图标动画不断推动其他元素。我尝试应用填充但它不断减去图标。
我已经尝试过box-sizing:border-box,我也厌倦了在jQuery代码中应用填充。
$(document).ready(function(){
$(".smedia").mouseover(function(){
$(this).animate({height:'60px',width:'60px'});
$(this).mouseout(function(){
$(this).animate({height:'50px',width:'50px'});
});
});
});
当我将鼠标移到上面时,它会不断推动上下的其他元素。它们从50px开始增长到60px,然后回到50px。
好吧,你正在改变元素的实际大小 - 这会推动其他元素 - 因为它们需要遵循文档的流程。
您只能使用CSS实现此效果,并且不会导致周围元素受到影响:
.smedia {
position: relative;
transform: scale(1);
transition: transform .5s;
}
.smedia:hover {
transform: scale(1.1);
}