Bootstrap:将鼠标悬停在自定义颜色的按钮上,不会改变样式

Question

.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>

我想在bootstrap中制作自定义按钮颜色,而不是使用默认颜色. 这个网站做得非常好.

但是,我注意到当我将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;
}

但是,当我回到提供自定义按钮引导样式的网站时,并在.btn-custom:hover选择器中将所需的悬停颜色的css代码包装起来就可以了!

例:

.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;
}

Answer 1

当我使用!important. 因为，btn-custom用于!important确保它与 Bootstrap 一起工作以覆盖其样式，我们在这里也需要相同的：

.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 !important;
}

<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>