Javascript - 更改边框宽度而不移动周围元素.

Question

我有以下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">&nbsp;</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');
  });

问题是它通过将边框宽度添加到元素的总宽度来移动元素.对此有何建议？

Answer 1

当我这样做并且我想要相同的+ border -movement结果时,我喜欢这样做:

function() { 
    $(this).css('borderWidth', '7px');
    $(this).css('margin', '-7px');
});

负利润带来了一切.

您还可以将样式压缩为对象,并在一个.css()调用中传递它们:

$(this).css( {borderWidth: '7px', margin: '-7px'} );