Question

你好，我正在玩灯箱。我想要做的是在缩略图周围设置一个边框，这样当用户将鼠标悬停在它上面时，它就会改变颜色。

示例：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>

Answer 1

尝试这样的事情

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

更好的示例请查看此fiddle

Answer 2

您不需要边框，只需向锚点添加一些padding和background-color即可。然后在:hover

上更改它的颜色

如何获得图像边框

2 个答案: