Javascript - 改变边界宽度而不移动周围的元素。 [英] Javascript - Changing border-width without moving surrounding elements.

问题描述

我有以下HTML：

 < div style =float：left;> 
< h2> Hover：< / h2>< br /> 
< div class =Sizeid =160x600style =margin：10px; float：left; height：600px; width：160px; border：1px solid＃90A4AF; text-align：center; position ：相对> 
< div style =position：absolute; top：50％; text-align：center>文字< / DIV> 
< / div> 
 
< div class =Sizeid =336x280style =margin：10px; float：left; height：280px; width：336px; border：1px solid＃90A4AF; text-align ：中心;位置：相对于> 
< div style =position：absolute; top：50％; text-align：center> Text< / div> 
< / div> 
 
< div class =clear>& nbsp;< / div> 
 
< div class =Sizeid =728x90style =margin：10px; height：90px; width：728px; border：1px solid＃90A4AF; text-align：center; position ：相对> 
< 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 -movement结果时，我喜欢这样做：

$ b $

  function（）{
 $（this）.css（'borderWidth'，'7px'）; 
 $（this）.css（'margin'，'-7px'）; 
}）; 
  

负利润率带来一切。

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

  $（this） .css（{borderWidth：'7px'，margin：'-7px'}）; 
  

I have the following 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>

And the following JS that changes border size on hover:

  $('.Size').hover(
  function() {
    $(this).css('borderWidth', '5px');
  },
  function() {
    $(this).css('borderWidth', '1px');
  });

The problem is that it's moving elements around it by adding the border-width to the total width of the element. Any suggestions around this?

解决方案

When I do this and I want that same +border -movement result, I like to do this:

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

The negative margin brings everything back in.

You can also condense the styles into an object and pass them in one .css() call:

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

这篇关于Javascript - 改变边界宽度而不移动周围的元素。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！