CSS a：悬停图像边框

【问题标题】：CSS a:hover image bordersCSS a：悬停图像边框
【发布时间】：2011-05-10 15:37:08
【问题描述】：

我在表格中有一堆链接的图像，并带有一些填充。当我尝试添加 img:hover 或 a:hover 边框属性时，当边框出现时，所有内容都会移动边框较厚的像素数量。有没有办法阻止这种行为？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

似乎对我有用（Safari 6.0.5）。由于边框是在 img 的“内部”绘制的，因此没有添加空间。

【讨论】：

【解决方案3】：

问题是您要为占用空间的元素添加边框 - 页面上的其他元素必须移动以腾出空间。

解决方案是添加与背景匹配的边框，然后在悬停时更改颜色或样式。另一种可能性是使框比您最初的预期更大，然后调整它的大小以适合您添加的边框。

【讨论】：