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; 
}