在 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>