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不太可能。您可以使用：active伪元素来实现您想要的某些功能，但是，如果您尝试这样做，您将很快发现它为什么不起作用。

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

Answer 2

要在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 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
        );
    }
}

仅使用html / css3单击时缩略图图像

3 个答案: