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

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

组件

我在做商品详情页的图片预览功能，用了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？那该怎么改才能在点击时触发缩放呢？

我来解答赞 10 收藏

反馈

2 条解答

英旭 Lv1

移动端确实不支持:hover，这个在触摸设备上基本等于废的。你想啊，手机又没有鼠标hover什么东西，手指头戳上去才算数。

最靠谱的方案是用JS监听点击事件来切换class：

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



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

  this.classList.toggle('zoomed');

});



zoomImg.addEventListener('touchend', function() {

  this.classList.toggle('zoomed');

});

然后CSS改成这样：

.zoom-image {

  transition: transform 0.3s ease;

}



.zoom-image.zoomed {

  transform: scale(1.2);

}

当时我也卡在这，后来想明白了：移动端做交互要么用click，要么用touch事件，CSS伪类在触屏上基本靠不住。

如果你的需求是点击放大查看全图这种功能，其实更推荐用现成的库比如PhotoSwipe，自己手写容易有各种边缘问题（双击放大、滑动冲突、橡皮筋效果之类的）。

2026-03-11 17:10

打工人树源 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