html - 如何获得图像周围的边界

嗨，我在玩灯箱。我正在尝试做的是在缩略图周围添加边框，以便当用户将鼠标悬停在其上方时，它将改变颜色。

示例：http://lokeshdhakar.com/projects/lightbox2/

当您将鼠标悬停在缩略图上时，您会看到它更改了图像周围的边框颜色。有人可以帮我做这些吗？我把它们放在一个div中，我得到了6个。谢谢您的帮助。

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>

最佳答案

尝试这样的事情

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

有关更好的示例，请检查此fiddle

关于html - 如何获得图像周围的边界，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15799611/