引导程序：将鼠标悬停在具有自定义颜色的按钮上，样式不会更改

.btn-custom {
  background-color: hsl(90, 43%, 72%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5f0da", endColorstr="#b7d698");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#e5f0da), to(#b7d698));
  background-image: -moz-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -ms-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f0da), color-stop(100%, #b7d698));
  background-image: -webkit-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -o-linear-gradient(top, #e5f0da, #b7d698);
  background-image: linear-gradient(#e5f0da, #b7d698);
  border-color: #b7d698 #b7d698 hsl(90, 43%, 67.5%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.29);
  -webkit-font-smoothing: antialiased;
}

.btn-custom:hover{
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-block btn-custom"> Hello World </button>

我想在引导程序中创建自定义按钮颜色，而不是使用默认颜色。该站点在此方面做得非常出色。

但是，我注意到，当我在所需的位置应用该CSS类时，按钮的颜色会正确显示，但是悬停效果消失了。

换句话说：当我将鼠标悬停在按钮上时，什么也没发生（例如：按钮不会稍微变亮/变暗）。

自定义按钮的颜色样式位于上面的代码片段中。

这是我在rails应用程序中应用样式的地方：

<%= link_to('Some Link', "#", class: "btn btn-block btn-custom") %> 

将鼠标悬停在链接上根本不会更改按钮的显示。我试图添加它，但是没有用：

.btn-custom:hover{
  background-color: blue;
}

接受答案后更新

出于某些原因，在我的rails项目中，只需添加以下内容并不会更改悬停时的样式：

.btn-custom:hover{
  background-color: blue;
}

但是，当我返回提供自定义按钮引导样式的网站，并将所需悬停颜色的css代码包装在.btn-custom:hover选择器中时，它起作用了！

例：

.btn-custom:hover{
  background-color: hsl(76, 96%, 18%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d4fb69", endColorstr="#425901");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#d4fb69), to(#425901));
  background-image: -moz-linear-gradient(top, #d4fb69, #425901);
  background-image: -ms-linear-gradient(top, #d4fb69, #425901);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4fb69), color-stop(100%, #425901));
  background-image: -webkit-linear-gradient(top, #d4fb69, #425901);
  background-image: -o-linear-gradient(top, #d4fb69, #425901);
  background-image: linear-gradient(#d4fb69, #425901);
  border-color: #425901 #425901 hsl(76, 96%, 5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85);
  -webkit-font-smoothing: antialiased;
}