CSS a:悬停图像边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4191651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS a:hover image borders
提问by AKor
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
我在表格中有一堆链接的图像，并带有一些填充。当我尝试添加 img:hover 或 a:hover 边框属性时，当边框出现时，所有内容都会移动边框粗的像素数量。有没有办法阻止这种行为？
回答by Brandon Durham
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
回答by derekerdmann
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
问题是您要为占用空间的元素添加边框 - 页面上的其他元素必须移动以为其腾出空间。
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.
解决方案是添加一个与背景匹配的边框，然后在悬停时更改颜色或样式。另一种可能性是使框比您最初预期的要大，然后调整其大小以适合您添加的边框。
回答by akauppi
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
似乎对我有用（Safari 6.0.5）。没有额外的空间，因为边框是在 img 的“内部”上绘制的。
