卡片hover变色必须显式声明transition: background-color 0.3s ease，仅写:hover规则无效；需同步控制图标颜色、适配深色模式与移动端hover限制，并确保可访问性对比度达标。
卡片整体 hover 变色必须显式加 transition
只写 .card:hover { background-color: #e9ecef; } 不会动——浏览器默认不启用动画。得给 .card 加过渡声明：transition: background-color 0.3s ease;。注意三点：
- 只过渡
background-color，别用all，否则边框、阴影、文字都会跟着抖 - 时间选
0.3s左右最自然，太短像闪，太长像卡 -
ease比linear更符合人眼对“平滑”的感知
图标颜色要和背景色联动，别靠父级继承
如果卡片里用了 Font Awesome 图标（比如 <i class="fas fa-heart"></i>），它默认颜色来自 color 属性，而这个属性不会自动随 background-color 变化。所以不能只改卡片背景，还得单独控制图标：
- 在
.card:hover里同步设color: #212529;（深色文字）或color: #fff;（浅色背景配白字） - 若图标用了
fill（SVG 写法），得额外加.card:hover svg { fill: currentColor; }才能响应 color 变化 - 避免用
!important强行覆盖图标颜色——后续换主题时极难维护
响应式断点下 hover 行为可能失效
在小屏（如 sm 或 xs）设备上，触摸优先的交互逻辑会让 :hover 触发不稳定，甚至不触发。这不是 bug，是浏览器规范行为：
- 移动端 Safari/Chrome 对 hover 支持有限，首次点击才模拟 hover，第二次点才进链接
- 若卡片用于移动优先场景，别把关键操作（如跳转、展开）只绑在 hover 上
- 真要兼容，可用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，确保只在有精细指针且支持 hover 的设备生效
深色模式下颜色对比度容易崩
你设的 #f8f9fa 在浅色模式下看着干净，但在系统深色模式下可能变成灰蒙蒙一片，文字几乎不可读：
- 别假设一套颜色通吃，用
@media (prefers-color-scheme: dark)单独定义暗色下的 hover 色值 - 推荐用 Bootstrap 5 的语义色工具类（如
bg-light/bg-dark）配合自定义 transition，而不是硬写十六进制值 - 检查 WCAG 对比度：hover 后的文字与背景色比值至少要达 4.5:1，否则可访问性审查会报错
