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'} );

Answer 2

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

$('.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');
  });

注意：这仅在边框宽度，宽度和高度使用相同的长度单位时才有效。如果使用“px”以外的单位，请相应更改。

Answer 3

您可以使用“outline”代替border，浏览器支持就可以了。

Answer 4

如果从边框中减去，则可以添加到填充中，反之亦然。

Answer 5

是的，添加position: relative; left: -5px;以正确定位。

Answer 6

使用

增加边框宽度的像素数减少边距

Answer 7

将宽度减少两倍于边框增加..

 $('.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});
  })

查看http://jsfiddle.net/rBrZL/

Answer 8

您可以使用与扩大边框相同的金额来减少边距。

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

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

CSS：

.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; }

HTML：

<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>

使用Javascript：

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

注意：id不应以数字开头，例如160x600。

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

8 个答案: