我有以下
HTML：
<div style="float:left;">
<h2>Hover:</h2><br />
<div class="Size" id="160x600" style="margin:10px;float:left;height:600px; width:160px;border:1px solid #90A4AF;text-align:center;position:relative">
<div style="position:absolute;top:50%;text-align:center"> Text</div>
</div>
<div class="Size" id="336x280" style="margin:10px;float:left;height:280px; width:336px;border:1px solid #90A4AF;text-align:center;position:relative">
<div style="position:absolute;top:50%;text-align:center">Text</div>
</div>
<div class="clear"> </div>
<div class="Size" id="728x90" style="margin:10px;height:90px; width:728px;border:1px solid #90A4AF;text-align:center;position:relative">
<div style="position:absolute;top:50%;text-align:center">Text</div>
</div>
</div>
并且以下JS更改了鼠标悬停时的边框大小：
$('.Size').hover(
function() {
$(this).css('borderWidth','5px');
},function() {
$(this).css('borderWidth','1px');
});
问题是它通过将border-width添加到元素的总宽度来移动它周围的元素.有什么建议呢？
解决方法
当我这样做,我想要相同的边界移动结果,我喜欢这样做：
function() {
$(this).css('borderWidth','7px');
$(this).css('margin','-7px');
});
负利润带来了一切.
您还可以将样式集合到一个对象中,并将它们传递到一个.css()调用中：
$(this).css( {borderWidth: '7px',margin: '-7px'} );
