是否可以通過在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中單擊圖像來「調出」圖像？

回答

相關問題