仅使用CSS伪选择器添加单击事件的4种方法

Question

我想只用CSS缩放图像。下面的代码在按住鼠标左键的同时缩放图像但是我想用鼠标点击放大和缩小。我怎样才能做到这一点？

.container img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.container img:active {
  -webkit-transform: scale(2);
  transform: scale(2);
  cursor: zoom-out;
}

Answer 1

让我们在这里使用一个技巧，一个输入复选框：

input[type=checkbox] {
  display: none;
}

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://placehold.it/200">
  </label>
</div>

Answer 2

仅使用CSS伪选择器添加单击事件的4种方法

注意：我在引用我们想要操作的元素时使用 target 这个词，并且触发作为元素我们用来操纵目标。

：检查

使用复选框或无线电和:checked来确定或导致目标的状态和/或采取措施。

触发

<label>
<input type="checkbox">
 <!--or--> 
<input type="radio">

条件

要求目标必须是：
- 跟随触发器或......
- ...... 触发器的后代。

注意

使用<checkbox>

display:none

确保<checkbox>有一个id，并且<label>的{{1}}属性的值与for的{{1}}相匹配}
这取决于目标是触发器或目标作为后代的兄弟。因此请注意，您最有可能使用这些选择器组合器：id，<checkbox>，~。

HTML

CSS

：目标

使用<label for='chx'>CHX</label> <input id='chx' type="checkbox"> <div>TARGET</div> nchor并在目标元素上应用#chx:checked + div {...伪选择器。

触发

<a>

条件

将:target分配给目标。
将相同的<a href=""></a>分配给前面带有哈希id

id

<a>

HTML

href

CSS

：焦点

触发器元素必须是<a href='#target'>A</a> <div id='target'>TARGET</div>类型或具有属性#target:target {...才能使用<input>。

触发

tabindex

条件

目标必须位于触发器或*目标之后的兄弟必须是触发器的后代。
状态或效果会持续到用户点击其他地方，之后会发生:focus或<div tabindex='0'>ANY INPUT OR USE TABINDEX</div>事件。

HTML

blur

CSS

unfocus

：活性

这是一个巧妙利用<nav tabindex='0'> <a href='#/'>TARGET</a> <a href='#/'>TARGET</a> <a href='#/'>TARGET</a> </nav>属性的hack，以便在没有脚本的情况下实现持久状态。

触发

 nav:focus ~ a {...

条件

目标必须位于触发器或*目标之后的兄弟必须是触发器的后代。
必须为目标分配transition-delay两次。
- 第一个代表持久状态的人。
- 第二个代表正常状态。

HTML

<a href='#/'>A</a>

CSS

transition

看起来很糟糕，对吗？我会尝试解释一下，但你最好先阅读article。

在正常情况下，如果您的触发器拥有<a href="#/">A</a> <div class='target'>TARGET</div>伪选择器，我们就可以在 keydown上操作目标 。这意味着我们的活跃状态实际上是活跃的，只要你把手指放在按钮上......这是蹩脚和无用的，我的意思是你希望做什么才能使.target { opacity: 1; transition: all 0s 9999999s; } a:active ~ .target { opacity: 0; transition: all 0s; }有用？也许是一个镇纸和一些橡皮筋，以保持按钮稳定和持久的压力？

我们会以:active的方式离开：跛脚和无用。代替：

在正常情况下为目标制定规则集。在上面的示例中，它是.active。
接下来我们添加一个.active ...确定然后... opacity:1有效，接下来是transition: ...好吧这个过渡不是＆＃39;将会看到它的持续时间为0秒，最后...... all ......延迟了116天？我们将回过头来看看，我们将继续讨论下一个规则集......
这些规则集声明在 trigger：active 的影响下 target 会发生什么。正如你可以看到它只是做它通常做的事情，onkeydown target 将在0秒内变得不可见。现在，一旦用户键入， target 再次可见... no * target＆＃39; s * 0s的新状态是持久的！没有镇纸，技术已经走过了漫长的道路。
目标实际上仍会恢复到正常状态，因为9999999s在没有橡皮筋和纸镇的情况下工作太懒惰而且无法工作。持久状态是被感知的而不是真实的，因为目标仍然离开由opacity:0带来的状态，这将在大约116天之前发生。 ;）

此代码段包含前面提到的4种方式。我知道OP请求缩放（其中有特色），但认为这是重复和无聊的，所以我添加了不同的效果以及缩放。

段

＆＃13;

:active

＆＃13;

:active

＆＃13;

Answer 3

    <html>
   <head>
      <title>Image Zoom</title>
      <style type="text/css">
         #imagediv {
         margin:0 auto;
         height:400px;
         width:400px;
         overflow:hidden;
         }
         img {
         position: relative;
         left: 50%;
         top: 50%;
         }
      </style>
   </head>
   <body>
      <input type="button" value ="-" onclick="zoom(0.9)"/>
      <input type="button" value ="+" onclick="zoom(1.1)"/>
      <div id="imagediv">
         <img id="pic" src=""/>
      </div>
      <script type="text/javascript" language="javascript">
         window.onload = function(){zoom(1)}
         function zoom(zm) {
             img=document.getElementById("pic")
             wid=img.width
             ht=img.height
             img.style.width=(wid*zm)+"px"
             img.style.height=(ht*zm)+"px"
             img.style.marginLeft = -(img.width/2) + "px";
             img.style.marginTop = -(img.height/2) + "px";
         }
      </script>
   </body>
</html>

Answer 4

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://placehold.it/200">
  </label>
</div>

Answer 5

以@Nhan为基础：https://stackoverflow.com/a/39859268/661872

范围更广，不需要多个元素的跟踪ID。

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2);
  cursor: zoom-out
}

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://placehold.it/200">
  </label>
</div>

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://placehold.it/200">
  </label>
</div>

使用CSS单击鼠标放大和缩小

5 个答案:

仅使用CSS伪选择器添加单击事件的4种方法

：检查

触发

条件

注意

HTML

CSS

：目标

触发

条件

HTML

CSS

：焦点

触发

条件

HTML

CSS

：活性

触发

条件

HTML

CSS

段