CSS a：悬停图像边框

Question

我在表格中有一堆链接的图像，带有一些填充。当我尝试添加img：hover或a：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的“内部”绘制的。