Javascript - Changing Border-width Without Moving Surrounding Elements.

I have the following HTML:

Hover:

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

Solution 2:

Change the width and height of the element by twice the amount of the border-width change (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');
  });

Note: This will only work if the border-width, width, and height use the same unit of length. If using a unit other than 'px', change that accordingly.

Solution 3:

You can use "outline" instead of border is browser support is OK with you.

Solution 4:

You could add to the padding if you subtract from the border and vice versa.

Solution 5:

Yes, add a position: relative; left: -5px; to position it correctly.

Share