Jquery Javascript-在不移动周围元素的情况下更改边框宽度。

我有以下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>

---

问题是它通过将边框宽度添加到元素的总宽度来移动元素。有什么建议吗

是，添加一个

位置：相对；左：-5px以正确定位。
如果从边框中减去，则可以添加填充，反之亦然。
使用与增加边框宽度相同的像素量减少边距。
当我这样做时，我想要相同的+边框-移动结果，我喜欢这样做：

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

负利润率使一切恢复正常

您还可以将样式压缩为一个对象，并在一个.css（）调用中传递它们：

将元素的宽度和高度更改为边框宽度更改量的两倍（）：

注意：仅当边框宽度、宽度和高度使用相同的长度单位时，此操作才有效。如果使用的是“px”以外的单位，则相应地进行更改。
将宽度减小两倍于边框增大值

 $('.Size').hover(
  function() {
      var width = parseInt($(this).css('width'));
      $(this).css('borderWidth', '5px').css({width:width-8});
  },
  function() {
      var width = parseInt($(this).css('width'));
    $(this).css('borderWidth', '1px').css({width:width+8});
  })

查看一下
您可以使用与加宽边框相同的量来减少边距

如果为悬停样式指定CSS类，则只需添加和删除该类，而无需向元素添加内联样式。这样，所有CSS都在样式表中，而不是分散在代码中，这使得维护更容易

我重写了代码以使用样式表而不是所有这些内联样式：

CSS:

HTML:

注意：
id
不应以数字开头，例如
160x600
您可以使用“大纲”而不是边框。浏览器支持对您来说是可以的。
顺便说一句，7px只是一个示例-这是很多边框。谢谢！这其实是我试过的，但我的基本数学错了，哈哈。性感的演示当然，通过计算动态差异，您可以做得更好：PNo good——悬停时每个div的底部都会发生变化。将“边框”更改为“轮廓”，并删除所有宽度操纵。
$(this).css( {borderWidth: '7px', margin: '-7px'} );

$('.Size').hover(
  function() {
    $(this).css('borderWidth', '5px');
    $(this).css('width', parseFloat($(this).css('width')) - 8 + 'px');
    $(this).css('height', parseFloat($(this).css('height')) - 8 + 'px');
  },
  function() {
    $(this).css('borderWidth', '1px');
    $(this).css('width', parseFloat($(this).css('width')) + 8 + 'px');
    $(this).css('height', parseFloat($(this).css('height')) + 8 + 'px');
  });

 $('.Size').hover(
  function() {
      var width = parseInt($(this).css('width'));
      $(this).css('borderWidth', '5px').css({width:width-8});
  },
  function() {
      var width = parseInt($(this).css('width'));
    $(this).css('borderWidth', '1px').css({width:width+8});
  })

.Size { margin: 10px; border: 1px solid #90A4AF; text-align: center; position: relative; }
.Size.Small { float: left; height: 600px; width:160px; }
.Size.Medium { float: left; height: 280px; width: 336px; }
.Size.Large { height: 90px; width: 728px; }
.Size > div { position: absolute; top: 50%; text-align: center; }
.Size.Hover { margin: 6px; border-width: 5px; }

<div style="float:left;">
  <h2>Hover:</h2>
  <br />
  <div class="Size Small" id="160x600">
    <div> Text</div>
  </div>

  <div class="Size Medium" id="336x280">
    <div>Text</div>
  </div>

  <div class="clear">&nbsp;</div>

  <div class="Size Large" id="728x90">
    <div>Text</div>
  </div>

</div>

$('.Size').hover(
  function() {
    $(this).addClass('Hover');
  },
  function() {
    $(this).removeClass('Hover');
  }
);