Question

我想将鼠标悬停在图像上以放大3倍然后当我点击放大的图像时它会回到原始大小。这可以纯粹用CSS完成吗？

谢谢

Answer 1

CSS无法跟踪点击事件。

您可以使用:hover进行缩放，:active进行缩放，但只要移动光标，图像就会因:hover效果而再次放大。< / p>

img:hover {
  transform: scale(1.3);
}

img:active {
  transform: scale(1);
}

但这不是一个好习惯。

Answer 2

CSS不支持点击。您可以使用

放大鼠标悬停

img:hover {transform: scale(300%);}

但是一旦用户离开它就会缩小

Answer 3

我的意思是你可以，但它并不漂亮，我不建议在纯CSS中使用它：

＆＃13;

.thing {
  position: relative;
  display: inline-block;
}
.thing label, .thing img {
  transform: scale(0.33);
  transform-origin: 0 0;
  transition: transform .4s;
}
.thing label {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.thing input {
  position: absolute;
  visibility: hidden;
}
.thing input:checked ~ img,
.thing input:checked ~ label {
  transform: scale(1);
}

＆＃13;

<div class="thing">
    <input type="checkbox" id="cb">
    <label for="cb"></label>
    <img src="http://placehold.it/150x150">
</div>

＆＃13;

使用CSS进行图像转换

3 个答案: