0

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

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

2 回答 2

1

尝试这样的事情

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

更好的例子检查这个小提琴

于 2013-04-03T22:50:22.477 回答
0

您不需要边框，只需在锚点上添加一些padding和 a即可。background-color然后改变它的颜色:hover

于 2013-04-03T22:53:21.083 回答