如何使用CSS过渡实现悬停效果？

用户问答

用户问：我正在尝试为我的按钮添加一个悬停效果，使其在鼠标悬停时改变颜色和大小。我应该怎么做？

回答：你可以使用CSS的transition属性来实现平滑的悬停效果。首先，定义按钮的基本样式，然后使用transition属性指定你想要过渡的属性和持续时间。例如：

.button {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #007BFF;
    color: white;
    transition: background-color 0.5s, transform 0.5s;
}

.button:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

在这个例子中，按钮在悬停时会改变颜色并放大10%。

用户问：如果我想在悬停效果中添加一个阴影，我该怎么做？

回答：你可以在:hover伪类中添加box-shadow属性来实现。例如：

.button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

这将在鼠标悬停时给按钮添加一个轻微的阴影效果。