: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 不只限于颜色，还可以用于尺寸、位置、阴影等可插值属性。

立即学习“前端免费学习笔记（深入）”；

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

73

查看详情

• 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 的设备上仍可用

基本上就这些。合理利用 :hover 与 transition 的组合，能让网页交互更直观自然，不复杂但容易忽略细节。

以上就是