a:hover border not working, border appears under image in the space below?

I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.

However, when I do this the border appears below the image in the space below but I'm unsure why.

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

As 开发者_StackOverflowyou can see the border is not around the image, it's below it.

Hope someone can help me with this problem.

Put the border on the image, not the anchor.

#overlay a:hover img {

If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.

We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.

Use Firebug to experiment with DOM object layouts.

Try this:

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