Bootstrap如何让Card在Hover时背景色平滑变换显示的CSS实现技巧-Bootstrap教程-PHP中文网

.card 必须在常态规则中显式声明 transition: background-color 0.3s ease，而非仅写 hover；初始和悬停背景色均需写死，避免透底闪烁；慎用 transition: all 和 bootstrap 工具类，优先通过自定义 class 提升权重；深色模式下需确保颜色对比度，并注意父容器 overflow: hidden 对渐变的裁剪影响。

bootstrap如何让card在hover时背景色平滑变换显示的css实现技巧

transition 必须写在 .card 常态规则里

只写 .card:hover { background-color: #f8f9fa; } 不会动——浏览器默认不启用动画，必须显式声明过渡。关键不是“加 hover”，而是“在常态下告诉浏览器：这个属性要怎么变”。

.card 规则里必须包含 transition: background-color 0.3s ease;
别用 transition: all，否则边框、阴影、字体大小等都可能意外参与动画，干扰交互感知
时间选 0.2s–0.3s 最自然；ease 比 linear 更符合人眼对渐变的预期

初始态和悬停态背景色都得显式写死

如果 .card 没设初始 background-color，悬停时可能从透明变色，在父容器为深色或带图时出现透底、闪烁甚至颜色错位。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

稳妥写法：.card { background-color: #fff; transition: background-color 0.3s ease; }
.card:hover { background-color: #f8f9fa; }
用了 Bootstrap 工具类如 bg-light？它只设了 background-color，没带 transition，仍需额外补上

选择器权重不够时 hover 样式会被覆盖

Bootstrap 的 .card 默认有 background-color: var(--bs-card-bg)，且很多工具类（如 bg-primary）内联或高优先级，纯 .card:hover 很容易被忽略。

调试时可用 !important 快速验证是否是权重问题，但上线前必须替换
推荐方案：加自定义 class，比如 .card.card-hoverable:hover，HTML 中写 class="card card-hoverable"
避免混用工具类和 hover 动画，例如不要同时写 class="card bg-primary" 和外部 hover 色——改用纯 class 控制背景