0

我想在单击/双击缩略图时放大图像，然后当我悬停该真实图像时它应该缩放...直到现在我可以悬停缩略图并显示真实图像但我想使用单击（显示）然后悬停真实图像...我不想使用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; 
}

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

4

3 回答 3

0

这对于 CSS 来说是不可能的。您可以使用 :active 伪元素来实现您想要的一些功能，但是，如果您尝试一下，您很快就会明白为什么它不起作用。

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

于 2013-11-14T07:54:48.767 回答
0

要在 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
}
于 2013-11-14T07:57:28.293 回答
-1

试试这个例子，

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
        );
    }
}
于 2013-11-14T07:54:31.923 回答