Question

我使用本指南自定义我使用bootstrap制作的网页中的按钮：

Change hover color on a button with Bootstrap customization

问题在于我无法在悬停中保持相同的字体颜色，我无法解释为什么它总是变为深灰色。这是代码：http://codepen.io/anon/pen/ByKZZK

HTML：

<head>
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<button href="mailto:sostegno@mlal.org" class="btn btn-custom btn-lg btn-block">info@mail.org&nbsp; <span class="glyphicon glyphicon-envelope"></span></button>

CSS：

.btn-custom {
    color: #FFD180;;
    background-color: #483737;
    border-color: #357ebd; /*set the color you want here*/
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
    color: #FFD180;
    background-color: #837171;
    border-color: #837171; /*set the color you want here*/
}

有什么想法吗？

Answer 1

只需将!important;添加到CSS color: #FFD180部分的hover即可。

.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
    color: #FFD180 !important;
    background-color: #837171;
    border-color: #837171; /*set the color you want here*/
}

编辑：颜色（＃333）可能来自bootstrap.min.css

中的这一行

.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}

Answer 2

似乎某种方式.btn类引导程序会对您的代码集产生更大的影响，您可以尝试避免!important使您的选择器更加具体：

.btn.btn定制

检查 Codepen

如何更改按钮悬停属性中的文本颜色

2 个答案: