Question

我曾经使用的css代码没问题。但是，在我改变了使用＆＃34; Lightbox2＆＃34;到＆＃34; fancybox＆＃34;，缩略图和缩略图边框之间的间距（当鼠标悬停在上方时）消失。出了什么问题？

将切换到使用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中，每个图像都包含在一个锚

中

<a class="ImgBorder">

，班级ImgBorder的值为margin: 30px 20px

在您当前的Fancybox中，您可以将此缺失的边距margin: 30px 20px添加到课程fancybox，因为每个图片现在都包含在一个锚中

<a class="fancybox"/>

正如我刚才注意到似乎没有定义任何类fancybox，你只需要添加

.fancybox
{
  margin: 30px 20px;
}

e.g。在你的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-class的边框和悬停：

.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>。

边距更新 为了保留图像的边距，当你为了图像移除它时：悬停 - 正确的边距方式就是这样：

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

由于你的CSS中已经有一个.fancybox img，只需添加这个边距，虽然你也可以在CSS文件中多次使用这些选择器，但最好将样式保存在一个元素中。

Answer 2

非常感谢！您已经指出了我的多个类的问题，并且我已经相应地修改了它：

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

（而不是在我的global.css中制作新的定义）

但是，出现了一个小问题：这条线在后台的编辑器中以红色显示。这条线有问题吗？但我想我会为此开辟一条新线程。

再次感谢！

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

2 个答案: