答案：通过transition属性与:hover伪类结合，可实现元素在悬停时的平滑过渡效果。首先为元素设置默认样式及transition（指定属性、持续时间、速度曲线和延迟），再在:hover中定义目标样式，如背景色渐变、缩放或位移；支持color、transform等数值型属性，不支持display和visibility；多属性过渡可用逗号分隔，合理配置timing-function和duration可提升交互自然度。
要实现CSS过渡效果与悬停（hover）结合，核心是利用 transition 属性定义变化过程，并通过 :hover 伪类触发样式改变。这种方式无需JavaScript，就能让元素在用户交互时平滑地变换颜色、大小、位置等。
1. 基本语法结构
给目标元素设置默认样式和过渡属性，再在:hover状态下定义最终样式。
示例：按钮背景色渐变
button {
background-color: #007bff;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
当鼠标移上按钮时，背景色会在0.3秒内平滑变深。
2. 可过渡的常见属性
transition支持大多数数值型CSS属性，常用包括：
立即学习“前端免费学习笔记（深入）”；
- color, background-color
- width, height
- opacity（透明度）
- transform（如scale、rotate）
- margin, padding
- border-radius
3. 过渡属性详解
transition 可细分为四个部分：
- property：指定哪个属性参与过渡，如 background 或 all
- duration：持续时间，如 0.5s 或 200ms
- timing-function：速度曲线，常用有 ease、linear、ease-in-out
- delay：延迟多久开始，可选
.icon {
transition: transform 0.4s ease-in-out 0.1s;
}
.icon:hover {
transform: scale(1.2);
}
图标在悬停后0.1秒开始放大，用0.4秒完成，动效更柔和。
4. 多属性过渡写法
如果多个属性都需要过渡，可以用逗号分隔：
.card {
transition:
background-color 0.3s ease,
transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
background-color: #f0f0f0;
transform: translateY(-5px);
}
卡片悬停时，背景色渐变同时微微上移，增强视觉反馈。
基本上就这些。只要掌握 transition 和 :hover 的配合逻辑，就能轻松做出自然的交互效果。关键是设定合理的持续时间和缓动函数，避免动画生硬。不复杂但容易忽略细节。
