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

我有以下HTML：

 
Hover:

 
 
 Text
 
 
 
Text
 
 
 
 
 
Text
 
  

以下JS在hover时更改边框大小：

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

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

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

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

Answer 4

您可以使用“outline”而不是border来浏览器支持就可以了。

Answer 5

是的，添加一个position: relative; left: -5px; 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

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

如果为hover样式指定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：

 
 
Hover:
 
 
 
 Text
 
 
 
Text
 
 
 
 
 
Text
 
  

使用Javascript：

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

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