Javascript - Changing border-width without moving surrounding elements.

Answer 1

You can reduce the margin with the same amount that you widen the border.

If you specify a CSS class for the hover style, then you can just add and remove the class instead of adding inline style to the element. That way all the CSS is in the style sheet instead of scattered in the code, which makes it easier to maintain.

I rewrote the code to use a style sheet instead of all those inline styles:

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

Note: An id should not start with a digit, like for example 160x600.