Question

我正在使用用户表单修改网页，因为我将所有图片移到最右边。它正在工作，除了在reddit上我还使用了RES的拖拽缩放和其他一些事情变得有点混乱的网站：http://i.stack.imgur.com/nJUyK.png

所以我想知道我是否可以点击一张图片从那密集的图像中“提起”。是否有可能在CSS（因为我只使用CSS userstylesheets），但我愿意接受任何替代方案。

Answer 1

您可以使用重新设置的复选框/ radiobuttons来完成（来源：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选择器。所以切换几张图片应该不成问题使用单选按钮具有魅力，当您单击下一个按钮时，最后选择的按钮将被取消选择（未经测试，只是一个想法;）。

Answer 2

如果你可以使用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;
}

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

2 个答案: