悬停效果时更改大小的代码 - CSS

在网页设计中，我们经常需要在鼠标悬停在某个元素上时改变元素的大小和样式，这时我们可以使用CSS来实现这个效果。本文将介绍如何使用CSS实现悬停效果时更改大小。

首先，我们需要在CSS文件中设置元素的初始大小和样式，如下所示：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: all 0.3s; /* 设置动画过渡时间为0.3秒 */
}

以上代码表示一个宽高均为200像素的灰色盒子，使用transition属性来设置动画过渡时间为0.3秒。

接下来，我们可以使用:hover伪类来设置鼠标悬停时的样式改变，如下所示：

.box:hover {
  width: 300px;
  height: 300px;
  background-color: #f00;
}

以上代码表示鼠标悬停在.box元素上时，将元素的宽高都改变为300像素，并将背景色改变为红色。

完整的CSS代码如下所示：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: all 0.3s; /* 设置动画过渡时间为0.3秒 */
}

.box:hover {
  width: 300px;
  height: 300px;
  background-color: #f00;
}

以上代码实现了一个悬停效果时更改大小的盒子效果。

总结：

使用CSS实现悬停效果时更改大小非常简单，只需要使用:hover伪类和transition属性即可。我们可以根据实际情况修改元素的初始样式和悬停样式，以达到自己想要的效果。