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

Question

所以我正在使用 Lightbox2 创建一个画廊。我把所有的图片放在“div class="container" 然后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; 
}