Bootstrap中如何用原生text-danger类实现文本Hover变色（替代硬编码）

API 探路者

2026-5-25

当然可行！用Bootstrap原生text-danger类实现悬停变色的几种方法

完全可以不用硬编码color: red，而是借助Bootstrap的text-danger类来实现这个效果，这里有几种实用的方案供你选择：

方法1：使用Bootstrap内置CSS变量（纯CSS环境推荐）
Bootstrap 4已经为所有主题色预定义了CSS变量，text-danger对应的颜色值就存在var(--danger)变量里。你可以直接在自定义样式中引用这个变量，彻底摆脱硬编码：
```
.text-primary:hover {
  color: var(--danger) !important;
}
```
这种方式的优势在于，如果后续Bootstrap的危险主题色有更新，你的样式会自动同步，完美贴合框架的设计系统。
方法2：用jQuery动态切换类（依赖JS的场景适用）
既然你已经引入了jQuery，也可以通过动态添加/移除类的方式，完全复用text-danger的样式：
```
$('.text-primary').hover(
  // 鼠标悬停：切换为text-danger类
  function() {
    $(this).removeClass('text-primary').addClass('text-danger');
  },
  // 鼠标离开：切回text-primary类
  function() {
    $(this).removeClass('text-danger').addClass('text-primary');
  }
);
```
这种方式完全不需要自定义颜色值，直接用Bootstrap原生类控制样式，非常“原生”。需要注意的是，如果你的元素除了颜色还有其他依赖text-primary的样式，切换类时要确保不会影响其他效果。
方法3：用Sass的@extend（预处理器项目适用）
如果你的项目使用Sass编写样式，可以直接继承text-danger的样式规则：
```
.text-primary:hover {
  @extend .text-danger;
}
```
编译后的CSS会自动包含text-danger的所有样式（这里主要是颜色属性），同样避免了硬编码颜色值的问题。