如何使用 CSS 在 Hover 上缩放元素？

在 CSS 中，我们可以使用 transform 属性来缩放元素。而在 hover 上，可以通过 CSS 伪类 :hover 来触发元素的缩放效果。

以下是示例代码片段：

/* 缩放前的样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: #CCC;
  transition: transform 0.2s ease-in-out; /* 添加过渡效果，使缩放更平滑 */
}

/* hover 上时的样式 */
.box:hover {
  transform: scale(1.1); /* 使元素放大 10% */
}

以上代码定义了一个具有 box 类名的元素，初始大小为 100px * 100px，背景颜色为灰色。在 .box:hover 上，将会触发 transform: scale(1.1) 属性，使元素放大 10%。

通过上述代码，我们可以简单地实现 hover 时对元素的缩放效果。

注意：上述代码中使用了 transition 属性来过渡缩放效果，使得缩放更加平滑。可以根据自己的需求来设置过渡效果的时间和缓动函数类型。

另外，transform 属性还可以实现其他类型的变换效果，例如旋转、位移和斜切等。熟练掌握 transform 属性的使用，可以大大提升页面交互效果的品质。