a：悬停边框不起作用，边框出现在下方空间的图像下？

Question

我一直在尝试使用a:hover pseduo类，以便当您将鼠标悬停在图像上时，会出现一个边框，使其看起来可以点击。

然而，当我这样做时，边框出现在下方空间的图像下方，但我不确定为什么。

#overlay a:hover {
    border: solid 2px #666; 
}

正如您所看到的，边框不在图像周围，它位于图像下方。

希望有人可以帮我解决这个问题。

Answer 1

将边框放在图像上，而不是锚点。

#overlay a:hover img {

Answer 2

如果您的图片有position: relative或其中一个疯狂的非​​块对齐，则封闭链接不会展开以包围它。

我们需要确定一些HTML，但尝试从图像中取出对齐参数，你应该这样做。如果您设置了<a> position: relative，我认为链接块会围绕它。

使用Firebug试验DOM对象布局。

Answer 3

试试这个：

#overlay a:hover {
    border: 2px solid #666; 
}