css - 是否可以通过在 CSS 中单击图像来将其设为 "bring up"？

Question

我正在使用 userstylesheet 修改网页，因为我正在将所有图像移动到最右边。它工作正常，除了在我也使用 RES 的 reddit 上的 drag-zoom 和其他一些网站有点乱:http://i.stack.imgur.com/nJUyK.png

所以我想知道我是否可以只单击一张图片以从一堆乱七八糟的图片中“调出”。在 CSS 中是否可行(因为我只使用 CSS 用户样式表)，但我愿意接受任何替代方案。

Answer 1

您可以使用重新设计的复选框/单选按钮来做到这一点
(来源: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 选择器也是可能的。所以切换多个图像应该不是问题。
使用单选按钮的魅力在于，当您单击下一个按钮时，上一个选中的按钮将取消选中(未经测试，只是一个想法；)。