是否可以通过在CSS中单击图像来“调出”图像？

我正在使用userstylesheet来修改网页，因为我将所有图片移动到最右侧。它的工作和所有除Reddit上，我也用RES的拖放变焦和其他一些网站，事情变得有点凌乱：http://i.stack.imgur.com/nJUyK.png 是否可以通过在CSS中单击图像来“调出”图像？

所以我在想，如果我可以单击图像，以“把它“从那堆密集的图像。是否有可能在CSS中（因为我只使用CSS userstylesheets），但我可以接受任何替代方案。

来源

2012-10-30 laggingreflex

你可以通过重新设计的复选框/单选按钮
做（来源：http://www.inserthtml.com/2012/04/css-click-states/）

扔图像要被显示和一个复选框（你想要的风格吧）放入容器

<form class="clickable"> 
    <label for="the-checkbox">Click Me!</label> 
    <!-- Radiobuttons should do it, too! --> 
    <input type="checkbox" id="the-checkbox" /> 
    <!-- This is the div we want to appear and disappear --> 
    <div class="appear">Some text(image to appear</div> 
</form>

现在，您可以使用:checked假选择器切换图像的可见性（或您的案例中的z-Index）。

.clickable .appear { 
    display: none; 
} 

.clickable input:checked ~ .appear { 
    /* Or change the z-Index here */ 
    display: block; 
}

查看上面链接文章底部的“快速演示”。
也可以使用id而不是分类或标签名称作为CSS选择器。因此，切换多张图片应该不成问题。
使用单选按钮有魅力，当你点击下一个按钮（未测试，只是一个想法;）时，最后选定的按钮将被取消选中。

来源

2012-10-30 07:20:33 Nippey

我喜欢它，谢谢。我会试试看。 – laggingreflex

我很乐意听到它是否有效。（甚至看到它：D） – Nippey

如果你可以用CSS3，你可以看看这个：http://designshack.net/tutorialexamples/HoverEffects/Ex2.html

基本上

img { 
height: 100px; 
width: 300px; 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
} 

and 

img:hover { 
height: 133px; 
width: 400px; 
margin-left: -50px; 
}

来源

2012-10-30 07:48:27

是否可以通过在CSS中单击图像来“调出”图像？

回答

相关问题