:hover 与 transition 结合可实现平滑的交互效果，如颜色渐变、缩放、阴影变化等；通过设置 transition 控制背景色、透明度、变换等属性的过渡时间与缓动函数，提升用户体验；推荐使用 transform 和 opacity 以避免重排，确保性能流畅，并注意在移动端保持功能可用性。
当鼠标悬停在元素上时，CSS 伪类 :hover 能够触发样式变化，而结合 transition 属性后，这些变化可以变得平滑自然，形成简单的动画效果。这种组合无需 JavaScript，就能提升界面的交互体验。
基本用法：实现颜色渐变
最常见的是让按钮或链接在鼠标移入时改变背景色，并通过 transition 实现颜色过渡。
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
这里设置了 transition 作用于 background-color，持续 0.3 秒，使用 ease 缓动函数。鼠标移上去时颜色会平滑变深。
扩展动画属性
transition 不只限于颜色，还可以用于尺寸、位置、阴影等可插值属性。
立即学习“前端免费学习笔记（深入）”；
- transform：缩放、旋转
- opacity：透明度变化
- box-shadow：阴影增强
- width/height：宽高变化
.card {
width: 200px;
opacity: 0.8;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
transform: scale(1.1);
opacity: 1;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
使用 all 表示多个属性同时过渡，cubic-bezier 可自定义动画曲线，使效果更生动。
注意性能与用户体验
虽然 hover + transition 简单有效，但需注意以下几点：
- 避免对 height、width、margin、padding 频繁变化做过渡，可能引起重排（reflow），影响性能
- 优先使用 transform 和 opacity，它们由 GPU 加速，更流畅
- 设置合理的过渡时间，一般 0.1s～0.4s 之间，太长会让人感觉迟钝
- 考虑移动端无“悬停”概念，确保功能在不支持 hover 的设备上仍可用
