html - 仅使用 html/css3 单击时使缩略图变大

Question

我想在单击/双击缩略图时使图像变大，然后当我悬停该真实图像时它应该缩放...直到现在我可以悬停缩略图并显示真实图像但我想使用点击(显示)然后悬停真实图像...我不想使用 js，css3 中没有任何属性可以帮助吗？

这是我的代码

    <section>
<li><a class="thumbnail" href="#">
                                            <img src="graphics/blue1.jpg" alt= "" width="100" height="150" />
                                            <span><img src="graphics/blue1.jpg"/><br /></span></a>
                                            </li>

                                            <li><a class="thumbnail" href="#">
                                            <img src="graphics/blue2.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue2.jpg" /></span></a>
                                            </li>
                                            <li>
                                            <a class="thumbnail" href="#"><img src="graphics/blue3.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue3.jpg"/><br /></span></a>
                                            </li>


                        </section>

这是这些缩略图的 CSS

 section li {
                list-style:none;
                    }

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#eee;
padding:5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ 
visibility: visible;
top: 10px;
left: 120px; 
}

同样在鼠标悬停时，悬停图像下降而不是出现在前面..

Answer 1

要在 css 中触发点击事件，您应该执行以下操作:将您的图像封装在 <a> 中

<a href="#ImgToDisplay"><img id="imageToBeClickedOn"/></a>

<img id="ImgToDisplay"></img>

默认情况下将 ImgToDisplay 设置为隐藏，并在您的 css 中添加以下内容:

ImgToDisplay:target
{
//set your image to visible here.
}

此外，要在悬停时放大 ImgToDisplay，只需:

ImgToDisplay:hover
{
//enlarge your image here
}