CSS a：懸停圖像邊框

Question

我在表格中有一堆鏈接的圖像，有一些填充。當我嘗試添加img：hover或：hover border屬性時，出現邊框時，所有內容都會移過邊框較厚的像素數量。有沒有辦法阻止這種行爲？

Answer 1

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

Answer 2

的問題是，您要添加一個邊框，佔用空間的元素 - 頁面上的其他元素都搬到騰出空間。

解決方法是添加一個與背景相匹配的邊框，然後在懸停時更改顏色或樣式。另一種可能性是使盒子比您原先想要的大，然後調整它的大小以適應您添加的邊框。

Answer 3

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

似乎爲我工作（Safari 6.0.5）。由於在img的「內部」繪製了邊框，因此沒有增加空間。