应使用.card:hover .card-title { color: #0d6efd; }，避免.card-title:hover或影响盒模型的属性，确保兼容Bootstrap 4/5并借助开发者工具验证生效样式。
Card标题悬停变色的CSS选择器怎么写
Bootstrap默认不给.card-title绑定悬停样式，必须自己加CSS。关键在于选对元素——别直接写.card:hover .card-title，因为.card-title通常在.card-header或.card-body里，层级可能更深；更稳妥的是用.card:hover .card-title（Bootstrap 5中.card-title一般直属于.card或.card-body，这个选择器基本够用）。
常见错误是写成.card-title:hover，这会让标题自己响应鼠标，而不是随卡片整体悬停触发，体验割裂。
- 推荐写法：
.card:hover .card-title { color: #0d6efd; } - 如果标题在
.card-header里，且你用了自定义背景色，记得同时改color和background-color（否则文字可能被盖住） - Bootstrap 5默认
.card-title字体加粗，悬停时若只改颜色，视觉变化较弱，可额外加font-weight: bold保持一致性（其实默认就是bold，但显式声明更安心）
如何避免悬停时文字抖动或布局偏移
变色本身不会引起重排，但如果悬停样式里不小心加了border、padding或margin，就会导致卡片尺寸变化，出现跳动。尤其注意.card-title父容器是否有display: flex或justify-content设置——这些属性在子元素尺寸微变时容易引发对齐偏移。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 只改
color、text-decoration、opacity这类不影响盒模型的属性 - 检查
.card-title是否设置了line-height：如果原始值是1.2，悬停时别改成1.3，否则行高变化会撑开高度 - 如果用了
transition，统一加在.card-title上，不要只加在color上而漏掉其他可能变化的属性（虽然这里只变色，但留个习惯）
在Vue/React组件里动态控制悬停样式是否可行
没必要。纯CSS的:hover性能更好、语义更清晰，且能自然退化（无JS也能工作）。强行用@mouseover/onMouseEnter监听再切class，反而增加复杂度，还可能因事件冒泡或延迟导致状态不同步。
- Vue中若坚持用响应式，至少把
class绑定到<div class="card">上，靠父级class控制子元素，而不是给.card-title单独绑class - React中同理，别用
useState存一个isHovered去条件渲染style——CSS伪类就是干这事的 - 唯一例外：需要配合动画库做复杂过渡（比如渐入+缩放），才考虑JS介入；单纯变色，请让CSS干活
兼容旧版Bootstrap（v4）要注意什么
Bootstrap 4的.card-title默认margin-bottom: 0.5rem，而v5改成了margin-bottom: 0.5rem（看起来一样，但v4的rem基准可能受html根字体影响更大）。真正差异在于v4默认标题颜色是#111，v5是#212529，所以悬停目标色要按实际基础色调整对比度。
- v4项目里建议用
!important确保覆盖（因为v4部分样式权重更高）：.card:hover .card-title { color: #0d6efd !important; } - 如果项目混用Bootstrap 4和5的CDN，优先查浏览器开发者工具里的“Computed”面板，看最终生效的
color值来自哪条规则 - v4中
.card-header自带背景色，若标题在header里，悬停时得同时调.card-header的背景色，否则文字颜色变化会被背景吞掉
悬停变色看着简单，但卡在层级、继承、版本差异上的人不少——盯住浏览器开发者工具的Styles面板，鼠标悬停时看哪条color被划掉、哪条生效，比猜快得多。
