如何用Sass设置Bootstrap按钮悬停颜色？现有代码失效求助

一、用Bootstrap Sass变量修改（推荐方式） #

Bootstrap提供了专门控制按钮悬停状态的Sass变量，直接在导入Bootstrap前覆盖这些变量就能生效，不用写自定义选择器：

// 全局按钮悬停样式变量
$btn-hover-bg: black;
$btn-hover-color: white;

// 如果要修改特定按钮变体（比如primary按钮），用对应的变体变量
$btn-primary-hover-bg: black;
$btn-primary-hover-color: white;

// 导入Bootstrap（必须放在变量之后）
@import "bootstrap";

二、自定义CSS/SCSS修改 #

如果不想用变量，或者只需要修改局部按钮，注意选择器要对应Bootstrap的.btn类（你之前用的.button是错误的），同时确保自定义样式在Bootstrap样式之后加载，或者用!important强制覆盖：

// 全局所有按钮的悬停样式
.btn {
  &:hover {
    background-color: black;
    color: white;
    // 如果框架样式优先级更高，加上!important
    // background-color: black !important;
    // color: white !important;
  }
}

// 仅修改primary按钮的悬停样式
.btn-primary {
  &:hover {
    background-color: black;
    color: white;
  }
}

你原来的代码失效原因 #

1. 选择器错误：Bootstrap的按钮默认类是.btn，不是.button，所以你的样式无法匹配到按钮元素；
2. 样式优先级问题：如果是新版本Bootstrap，框架自带的按钮样式优先级可能比你的自定义样式高，导致无法覆盖。

内容的提问来源于stack exchange，提问作者Tuan Dat