我使用css转换的简单库不起作用

Question

我一直在尝试创建一个非常简单的画廊，有一个主图片和三个缩略图在右边，当悬停时，它们将显示自己为主图像。我使用了一个发现的小提琴，并试图编辑它，以满足我自己的需要，但似乎有点混乱的过程中！这是我第一次使用css转换来创建这样的东西，所以它很可能是非常明显的东西--我只是看不见。

我的代码如下：

<div id="gallery">
<div class="thumb" id="thumb-1"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-main.jpg" /></div>
<div class="thumb" id="thumb-2"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-main.jpg" /></div>
<div class="thumb" id="thumb-3"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-main.jpg" /></div>
</div>



#gallery {
    position: relative;
    width: 470px;
    height: 350px;
    float: left;
    margin: 0 35px 20px 0;
}

#gallery .thumb img {
    height: 110px;
    width: 110px;
}

#gallery .main img {
    height: 350px;
    width: 350px;
}

#gallery .thumb {
    cursor: pointer;
    left: 357px;
    position: absolute;
    display: block;
    width: 112px;
    height: 112px;
    border: 1px solid #6d6d6d;
}

#thumb-2 {
    top: 117px;
}

#thumb-3 {
    top: 234px;
}

#gallery .main {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
    position: absolute;
    border: 1px solid #6d6d6d;
}

#gallery .thumb:hover + .main { 
    opacity:0;
}

Answer 1

悬停在缩略图上应在主视图中显示相应的图像。但是，您正相反地这样做(它用opacity:0将图像隐藏在主视图中)。所以，试着像这样改变它：

#gallery .main {
  opacity: 0;  /* changed 1 to 0 */
  ...
}
/* always show the first initially */
#gallery > .main:nth-of-type(2) {
  opacity:1;    
}

#gallery .thumb:hover + .main { 
  opacity:1; /* changed 0 to 1 */
}

演示。

注意到：演示只解决了问题中提到的问题。为了使它成为一个可接受的库，我认为如果您想要一个纯CSS解决方案，就必须更改布局(HTML代码)，否则您必须添加更多的脚本代码。