:hover 伪类结合 transition 可实现平滑动画，提升交互体验。通过定义过渡属性、时间与缓动函数，可控制颜色、位移等变化。如按钮背景色渐变、卡片悬停上浮加阴影，以及链接的颜色与缩放效果，均能增强视觉反馈。合理设置延迟与贝塞尔曲线，使动画更自然。需注意避免过度使用导致干扰。
当用户将鼠标悬停在元素上时，:hover 伪类可以触发样式变化，而结合 transition 属性，能让这些变化以平滑动画的方式呈现，提升交互体验。关键在于定义哪些属性需要过渡、持续时间及缓动方式。
基本用法：颜色与位移的平滑过渡
给元素设置默认样式，并在 :hover 中定义目标状态，transition 控制中间过程。
button {
background-color: #007bff;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
此时背景色会缓慢变深，而不是瞬间切换。
多属性过渡：同时改变多个视觉特征
通过 transition 可指定多个属性，或使用 all 来统一处理。
立即学习“前端免费学习笔记（深入）”；
.card {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
悬停时卡片微微上移并增强阴影，营造“浮起”感。
过渡时机控制：延迟与缓动函数
transition 支持更精细的控制，如延迟出现或调整动画节奏。
a {
color: #333;
text-decoration: none;
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s 0.1s;
}
a:hover {
color: red;
transform: scale(1.05);
}
颜色立即变化，缩放稍晚开始，搭配贝塞尔曲线让动画更自然。
基本上就这些。合理使用 :hover 与 transition 能显著提升界面响应感，注意别让动画太慢或过于频繁，以免干扰用户操作。
