Card hover 背景色过渡需显式声明 transition 属性，仅作用于 background-color，设为 0.3s ease；初始态与悬停态均须明确指定背景色；注意 Bootstrap 工具类无过渡、优先级冲突及深色模式下颜色可访问性问题。
Card hover 背景色过渡必须加 transition
直接写 :hover { background-color: #007bff; } 不会动——浏览器默认不启用动画，得显式声明过渡属性。最简方案是给 .card 加一行：
.card {
transition: background-color 0.3s ease;
}
注意三点：只过渡 background-color（别用 all，否则边框、阴影等也会动）；时间设 0.3s 左右最自然；ease 比 linear 更符合人眼感知。
背景色变化要确保初始态和悬停态都明确指定
如果卡片本身没设 background-color，悬停时可能从透明变色，导致在某些父容器下出现意外透底或闪烁。稳妥做法是显式定义两态：
.card {
background-color: #fff;
transition: background-color 0.3s ease;
}
.card:hover {
background-color: #f8f9fa;
}
若用 Bootstrap 5 的颜色工具类（如 bg-light），它只是设了 background-color，但没带 transition，仍需额外补上。
避免 !important 和 CSS 优先级冲突
Bootstrap 的 .card 默认有 background-color: #fff，但如果你用了 bg-primary 这类工具类，它的样式是内联或高优先级的，直接写 .card:hover 可能被覆盖。解决方法：
- 把 hover 样式放到自定义 CSS 文件的最后
- 用更具体的选择器，比如
.card.bg-light:hover - 避免在 HTML 里混用
class="card bg-light"和外部 hover 动画，改用纯 class 控制背景
另外，别在 hover 规则里加 !important——它会让后续调试变得极难。
深色模式下要注意 prefers-color-scheme 干扰
如果用户开了系统深色模式，而你的 hover 色在浅色下看着 OK，深色下可能对比度崩坏（比如 #f8f9fa 在黑底上几乎看不见）。不要假设单一配色通用：
- 用
@media (prefers-color-scheme: dark)单独重写 hover 色 - 或者统一用 Bootstrap 的语义色变量，如
var(--bs-body-bg)和var(--bs-tertiary-bg) - 测试时真机切深色模式看效果，别只靠开发者工具模拟
过渡动画本身不受深色模式影响，但颜色值选错，再顺滑也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
