css - 使用另一个灯箱后缩略图之间的间距消失

Question

我以前一直使用的 css 代码没有问题。但是，在我从使用“Lightbox2”更改为“fancybox”之后，缩略图和缩略图边框之间的间距(当鼠标悬停在上方时)消失了。出了什么问题？

将切换到使用fancybox(www.lixiao-art.com/test.html)后的问题页面与使用Lightbox2(www.lixiao-art.com/latest.html)的页面进行比较

这是我使用的代码:

---

body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
  font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}


#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}



#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px; 
}


#content a {text-decoration:underline}


h2 {height: 2em;}  


.footer {
            text-align:center; 
            padding-top: 50px;
            padding-bottom: 1em; 
            font-size: 11px;
            } 


a{text-decoration: none;
color: #645630;}
a:hover {color: red;}


* {margin: 0;}
html, body, wrapper {height: 100%;}


.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}

.ImgBorder {display: block;
  float: left;
  margin: 30px 20px; }
h5{
clear:both
}

img { border: none; }    

---

谢谢!

Answer 1

在您之前的 Lightbox2 中，每张图片都包裹在一个 anchor 中

<a class="ImgBorder">

和类ImgBorder具有值 margin: 30px 20px

在您当前的 Fancybox 中，您可以添加这个缺失的边距 margin: 30px 20px上课fancybox因为现在每张图片都包裹在一个 anchor 中

<a class="fancybox"/>

因为我刚刚注意到似乎没有任何类 fancybox 已经定义，你只需要添加

.fancybox
{
  margin: 30px 20px;
}

例如在你的 global.css 中

更新:如果您还想显示 fancybox-images 的边框，有两种方法可以实现: 目前您的测试页面上有两个灯箱版本。对于第一张图片，边框仍然显示为悬停。以下 CSS 正在处理这个问题:

.ImgBorder img {  
  border: 2px solid transparent;  
  height: 100px;  
}  
.ImgBorder:hover img {  
   border-color:white;  
}  

对于第一张图片的图片标记如下:

<a class="ImgBorder" rel="lightbox[gaze]" 
                     href="http://www.lixiao-art.com/work/2014/52.jpg">
    <img src="work/2014/52_t.jpg">
</a>

您当前的 fancybox-markup 对于您的第二张图片是这样的:

<a href="work/2014/52.jpg" rel="group" class="fancybox">
   <img src="work/2014/52_t.jpg">
</a>  

因此，您只需为 fancybox 类添加边框和悬停即可:

.fancybox img {  
  border: 2px solid transparent;  
  height: 100px;  
}  
.fancybox:hover img {  
   border-color:white;  
}

由于 fancybox 使用的 CSS，可能会有一些额外的调整，但如果你只是在你的网站上检查它会更容易，因为我刚刚注意到你目前正在处理它。
此刻你的 fancybox 图像“跳跃”是因为你添加了 CSS

.fancybox:hover
{
  border-color:white;
  margin:30px 20px;
}

这导致在悬停时设置此边距(因此然后跳跃)。我建议你试试我上面发布的 CSS，它应该可以工作。

更新 2 评论跟进问题:
属性class和rel代表如下:
rel (='related') 是包含您之前的灯箱信息的属性。灯箱脚本只会获取信息，例如大图片或那里的链接。
class :正如您所注意到的，几乎所有的 css 文件都以点 (.) 开头，后跟名称。此名称是样式信息将应用到的类的名称。所以.test {color:red;}如果它被包装在具有类测试的元素中，则会导致显示红色文本，例如一个<div> : <div class="test">This is red text</div> .

边距更新:当您为 :hover 移除图片时，要保持图片的边距 - 获得边距的正确方法就是这样:

.fancybox img
{
  margin:30px 20px;
}

因为您的 CSS 中已经有一个 .fancybox img，只需向其添加此边距，尽管您也可以在一个 CSS 文件中多次使用这些选择器，但最好将应用于一个元素的样式保持在一起。