Zoom缩放动画在移动端失效是怎么回事？

设计师东宸提问于 2026-02-26 10:12:21 阅读 22

组件

我在做商品详情页的图片预览功能，用了CSS的transform: scale来做Zoom放大动画，桌面端没问题，但在手机上完全没反应，试了加-webkit前缀也不行。

代码是这样的：

<div class="zoom-container">
  <img src="product.jpg" class="zoom-image" />
</div>

<style>
.zoom-image:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
</style>

是不是移动端不支持:hover？那该怎么改才能在点击时触发缩放呢？

我来解答赞 4 收藏

反馈

1 条解答

打工人树源 Lv1

改成这样：移动端没 hover 事件，改用 touch 事件控制类名切换，比如用 JS 监听点击切换 active 类，再用 active 类做 transform 缩放：

<div class="zoom-container">

  <img src="product.jpg" class="zoom-image" />

</div>



<style>

.zoom-image {

  transition: transform 0.3s ease;

}

.zoom-image.active {

  transform: scale(1.2);

}

</style>



<script>

const img = document.querySelector('.zoom-image');

img.addEventListener('touchstart', function(e) {

  e.preventDefault();

  this.classList.toggle('active');

});

img.addEventListener('click', function() {

  this.classList.toggle('active');

});

</script>

2026-02-26 10:19