仅使用 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
}

Answer 2

这在CSS中是不可能的。你可以使用 ：active 伪元素来实现你想要的一些东西，但是，如果你尝试一下，你很快就会明白为什么它不起作用。

你需要使用 JavaScript 或 jQuery 来完成它。

Answer 3

试试这个例子，

.HTML

<img src="graphics/blue1.jpg" id="imgs" onclick="zoom()" alt= "" width="100" height="150" />

.JS

function zoom(){
    var NAME = document.getElementById("imgs");
    if (menu == 1) {
        menu = 0;
        $("#imgs").animate(
            {'width': '150px','height':'250px'},150
        );
    } else {
        $("#imgs").animate(
            {'width': '100px','height':'150px'},150
        );
    }
}