Question

所以我正在使用Lightbox2创建一个库。我将所有图像放在“div class =”容器中“然后enter code here我使用CSS在照片的缩略图周围添加边框。我给它了静态和悬停时的属性。

这是我用来设置Lightbox2的HTML：

<a href="images/work/cardrawing.jpg" data-lightbox="drawing" title="subaru drawing"><img src="images/work/thumbnails/cardrawing_thumb.jpg" /></a>

工作得很好。然后，我将以下代码添加到“lightbox.css”文件的底部，为其提供特定的属性：

a img{border:5px solid #cccccc;} a:hover img{border:5px solid #0b6f8a;}

这也很有效，但是，它影响了我网站上所有其他具有锚定链接的图像。几乎每个图像都是如此。什么是将所有内容归类为仅影响某些图像的最佳方式？

Answer 1

你需要更具体的CSS。您的图片有类灯箱。

<a...><img class="lighbox" ... /></a>

所以你要使用

a img.lighbox{...}

和

a img.lighbox:hover{...}

Answer 2

您应该使用ID或类。设置了特定的img代码，如下所示：

<a href="images/work/cardrawing.jpg" data-lightbox="drawing" title="subaru drawing">
    <img class="hoverImage" src="images/work/thumbnails/cardrawing_thumb.jpg" />
</a>

然后在你的CSS中你可以使用：

a img.hoverImage{
    border:5px solid #cccccc;
} 
a img.hoverImage:hover{
    border:5px solid #0b6f8a;
}

然后，您可以根据需要为每个图像设置特定的属性/悬停。

Answer 3

您需要按类

定位图像

HTML：

<a href="images/work/cardrawing.jpg" data-lightbox="drawing" title="subaru drawing">
    <img class="lightbox" src="images/work/thumbnails/cardrawing_thumb.jpg" />
</a>

CSS：

img.lightbox { 
    border:5px solid #cccccc; 
} 

a img.lightbox:hover { 
    border:5px solid #0b6f8a; 
}

图像缩略图上的CSS边框会影响页面上的所有图像

3 个答案: