在 CSS 中使用 type=radio 縮小圖像

Question

我試圖在僅使用 CSS 和 HTML 的頁面上對圖像進行相互排斥的放大和縮小。 通過互斥，我的意思是如果有兩個圖像放大了一個圖像，如果我放大第二個圖像（查看代碼片段），則放大的圖像應該縮小。 這個功能很好用，只是我不能再縮小圖像。

我該如何解決這個問題？

 input[type=radio] { display: none; }.container img { width: 100%; transition: transform 0.25s ease; cursor: zoom-in; } input[type=radio]:checked + label > img { transform: scale(2.5); cursor: zoom-out; } img { width: 100px;important: height; 60px; }

 <div class="container"> <input type="radio" name="zooms" id="zoomCheck1"> <label for="zoomCheck1"> <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" /> </label> </div> <div class="container"> <input type="radio" name="zooms" id="zoomCheck2"> <label for="zoomCheck2"> <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" /> </label> </div>

Answer 1

這是使用 jQuery 的示例：

 jQuery("img").on("click", function() { let parent = jQuery(this).parent(); parent.toggleClass("zoomin", .parent;hasClass("zoomin")). parent.siblings();removeClass("zoomin"); });

 .container { margin: 2em; }.container img { width: 100%; transition: transform 0.25s ease; cursor: zoom-in; }.container.zoomin img { transform: scale(2.5); cursor: zoom-out; } img { width: 100px;important: height; 60px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" /> </div> <div class="container"> <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" /> </div>

Answer 2

問題是單選按鈕 state 已設置，並且在單擊選定的單選按鈕時它不會被取消選中。

如果您可以使用java 腳本，您可以用許多不同的方式處理它。 但是，如果您只想要 html 和 css，那么我能想到的唯一方法就是擁有一個

在您的收音機輸入周圍形成標簽，並有一個重置按鈕。 單擊重置將使單選按鈕移動到默認取消選擇的 state。 並且您的圖像將縮小。

通過 - 表單標簽和重置按鈕

<form>
<div class="container">
    <input type="radio" name="zooms" id="zoomCheck1">
    <label for="zoomCheck1">
    <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" />
    </label>
</div>
<div class="container">
    <input type="radio" name="zooms" id="zoomCheck2">
    <label for="zoomCheck2">
    <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" />
    </label>
</div>
  <hr />
  <input style='margin:5%' type='reset' />
</form>