html - 图片链接到另一张图片(图片库)

Question

所以我基本上希望能够单击任何小图像并让它们显示在它们上方的较大图像区域中。就像一个画廊。无论如何，它可以用 HTML/CSS 做到这一点吗？

这是我的代码:

HTML

<div class="mainInfo">
<div class="gallery">
    <div class="displayImage">
        <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
    </div>
    <div class="thumbImage">
                    <a href="#"><img src="../assets/images/gallery/gallery1.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery2.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery4.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery5.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery6.png" alt=""></a>
    </div>

</div>

CSS

.mainInfo {
height: 800px;
background-color:#FCFCFC;
color:#001D5D;
}

 .gallery {
float: left;
}

.thumbImage {
margin-top:575px;
}
 .thumbImage img {
width:140px;
height:auto;
margin-left:15px;
 }
.displayImage {
margin:89px 0 0 177px;
}

.displayImage img {
width:600px;
height:auto;
}

Answer 1

不，当你想要通过点击触发某些东西时，你必须使用 javascript。最接近的方法是使用鼠标悬停。