Javascript - Ändern der Umrandungsbreite, ohne umgebende Elemente zu verschieben.

Question

Ich habe folgende 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> 

und die folgenden JS, die Rahmengröße auf schweben ändert:

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

Das Problem ist, dass es die durch Hinzufügen der border-width Elemente um es bewegt Gesamtbreite des Elements Irgendwelche Vorschläge dazu?

Answer 1

Wenn ich das tue, und ich möchte, dass gleiche + Grenze -Bewegung Ergebnis, Ich mag, dies zu tun:

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

Die negative Marge bringt alles wieder in

Sie können auch die Stile in ein Objekt kondensieren und sie in einem CSS-() übergeben Anruf.

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

Answer 2

Ja, fügen Sie ein position: relative; left: -5px; hinzu, um es richtig zu positionieren.

Answer 3

Sie könnten zum Padding hinzufügen, wenn Sie vom Rand subtrahieren und umgekehrt.

Answer 4

verringern den Rand mit der gleichen Menge an Pixeln Sie die Rahmenbreite erhöhen mit

Answer 5

Ändern Sie die Breite und Höhe des Elements um den doppelten Betrag der Grenze Breitenänderung (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'); 
    }); 

Hinweis: Dies funktioniert nur, wenn die Grenzbreite, Breite und Höhe verwenden Sie die gleiche Längeneinheit. Wenn Sie eine andere Einheit als "px" verwenden, ändern Sie dies entsprechend.

Answer 6

Verringern Sie die Breite von zwei mal der Grenze Anstieg ..

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

haben einen Blick auf http://jsfiddle.net/rBrZL/

Answer 7

Sie können die Marge mit der gleichen Menge reduzieren, dass Sie die Grenze erweitern.

Wenn Sie eine CSS-Klasse für den Hover-Stil angeben, können Sie die Klasse einfach hinzufügen und entfernen, anstatt dem Element Inline-Stil hinzuzufügen. Auf diese Weise ist das gesamte CSS im Stylesheet statt im Code verstreut, was die Pflege erleichtert. statt all diesen Inline-Styles

schrieb ich den Code ein Stylesheet zu verwenden:

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

Hinweis: Ein id sollte nicht mit einer Ziffer beginnen, wie zum Beispiel 160x600.

Answer 8

Sie können "Umriss" statt Rand verwenden, ist Browser-Unterstützung in Ordnung mit Ihnen.