Bootstrap：自定义CSS无法处理按钮悬停

Question

我正试图在我的Bootstrap网站上创建一个按钮，在悬停时改变颜色以拥有我的规格，但不幸的是，无论我尝试什么，它都无法正常工作！我正在使用v3。按下按钮确实会显示变化。

我的HTML看起来像这样：

<button href="#" type="button" class="btn btn-success"><i class="fa fa-rocket" aria-hidden="true"></i> Let's get started!</button>

我的CSS看起来像这样：

.btn {
    font-family: "Raleway", cursive;
    background-color: #239799;
    border-color: #10c6d3;
}
.btn:focus, .btn:active, .btn:hover {
    font-family: "Raleway", cursive;
    background-color: #10274c;
    border-color: #10c6d3;
}

更新了CSS，但仍无效。

.btn:focus, .btn:active, .btn:hover {
    font-family: "Raleway", cursive;
    background-color: #10274c !important;
    border-color: #10c6d3 !important;
}

我在这里缺少什么？

Answer 1

这是因为background-image优先于background-color btn:active选择器定义规则background-image:none。 （在bootstrap 主题 css中的某个地方）
btn:hover永远不会重置background-image，因此当您将鼠标悬停在按钮上时，您会发现颜色没有差异。

将background-image:none;添加到您的.btn:focus, .btn:active, .btn:hover选择器，然后您就可以＆＃39;＆＃39;＆＃39;注意它确实发生了变化。

＆＃13;

＆＃13;

.btn.btn-primary {
  font-family: "Raleway", cursive;
  background-color: #239799;
  border-color: #10c6d3;
}

.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:hover {
  font-family: "Raleway", cursive;
  background-color: #10274c;
  border-color: #10c6d3;
}

#fixed:hover {
  background-image:none;
 }

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<a class="btn btn-lg btn-primary">i have a silly gradient as background</a>
<br><br>
<a class="btn btn-lg btn-primary" id="fixed">i'm fixed</a>

＆＃13;

＆＃13;

＆＃13;

本着的精神，给一个人一条鱼，你喂他一天;教一个人钓鱼，你喂他一辈子，你可以使用chrome dev工具检查元素。打开和关闭鼠标状态特定选择器以便于调试。

Answer 2

而不是使用＆＃34; class＆＃34;要定义样式，请尝试使用＆＃34; id＆＃34;。 我非常确定bootstrap是按类工作的，并且当你试图超越顶部时并不喜欢。或者尝试编辑右侧引导程序表中的样式（检查href）

Answer 3

但我可以在你自己的代码中看到颜色的代码是一样的。你认为这是一个原因吗？或者我可以在你的按钮中看到使用class =＆＃34; btn btn-success＆＃34 ;, so＆＃34; btn-success＆＃34;有自己的CSS。还需要这个覆盖？