如何获得图像周围的边界

Question

Hi there I'am playing around with light box. What I am trying to do is get a border around my thumbnail so that when the user hovers over it, it will change color.

Example : http://lokeshdhakar.com/projects/lightbox2/

You can see when you hover the thumbnail it changes the border color around the image. Can anyone help me do this with my images? I have put them around in a div and i got 6 of them. Thanks for the help.

Html:

<div class = "lightbox">
    <a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a>
    <a href="images/image2.jpg" rel="lightbox[group]"><img src="images/image2t.jpg" /></a>
    <a href="images/image3.jpg" rel="lightbox[group]"><img src="images/image3t.jpg" /></a>
    <a href="images/image4.jpg" rel="lightbox[group]"><img src="images/image4t.jpg" /></a>
    <a href="images/image5.jpg" rel="lightbox[group]"><img src="images/image5t.jpg" /></a>
    <a href="images/image6.jpg" rel="lightbox[group]"><img src="images/image6t.jpg" /></a>
</div>

Answer 1

try something like this

a img
{
border:3px solid #ccc;
}
a:hover img
{
border:3px solid #666;
}

for better example check this fiddle

Answer 2

You don't need a border, just add some padding and a background-color to the anchor. Then change it's color on :hover