时间戳

首页 > 解决方案 > 将鼠标悬停在图像上方时会导致图像比例变大的问题。（我使用ease-in-out，但在“out”中它并不像我想要的那样慢）

css - 将鼠标悬停在图像上方时会导致图像比例变大的问题。（我使用ease-in-out，但在“out”中它并不像我想要的那样慢）

问题描述

当我将鼠标悬停在包含图像的 div 上时，它会根据我的需要慢慢放大一点，但是，一旦我用鼠标离开该 div，图像就会回到原来的位置，而没有缓慢而平滑的过渡。为什么？

.stage:hover {
    img {
      transition: all .3s ease-in-out;
      transform: scale(1.03);
    }
  }

标签： csshovertransition

解决方案

当您停止悬停时，img 将停止转换设置，因此它只会跳回初始比例。

尝试将过渡放在实际的 img 上：

.stage {
  background-color: gray;
  /* just to show the extent of the stage */
}

.stage img {
  transition: all .3s ease-in-out;
}

.stage:hover img {
  transform: scale(1.03);
}
<div class="stage"><img src="https://picsum.photos/id/1015/200/300"></div>

推荐阅读