CSS a: Hover Bild Grenzen

Question

Ich habe eine Reihe von verknüpften Bildern in einer Tabelle, mit einigen Padding. Wenn ich versuche, ein Attribut "img: hover" oder "a: Hover border" hinzuzufügen, wird beim Überschreiten des Rahmens alles um die Pixelanzahl verschoben, um die der Rahmen dick ist. Gibt es eine Möglichkeit, dieses Verhalten zu stoppen?

Answer 1

img { 
    border: solid 10px transparent; 
} 
img:hover { 
    border-color: green; 
} 

Answer 2

Das Problem ist, dass Sie dem Element, das Platz einnimmt, einen Rahmen hinzufügen - die anderen Elemente auf der Seite müssen verschoben werden, um Platz dafür zu schaffen.

Die Lösung besteht darin, einen Rahmen hinzuzufügen, der dem Hintergrund entspricht, und dann nur die Farbe oder das Styling bei Hover ändern. Eine andere Möglichkeit besteht darin, die Box größer als ursprünglich vorgesehen zu machen und sie dann an die Grenze anzupassen, die Sie hinzufügen.

Answer 3

img:hover { 
    border: solid 2px red; 
    margin: -2px; 
} 

Scheint für mich zu arbeiten (Safari 6.0.5). Kein zusätzlicher Platz, da der Rahmen an der Innenseite des img gezeichnet wird.