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

【问题标题】：How to change text color in button hover property如何更改按钮悬停属性中的文本颜色
【发布时间】：2015-02-11 07:34:59
【问题描述】：

我使用本指南自定义了我使用 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:abc@def.ghi" 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*/
}

有什么想法吗？

【问题讨论】：

我只想指出这里的双分号color: #FFD180;;

标签： html css twitter-bootstrap button hover

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

似乎.btn 引导类在您的代码笔上越来越重要，您可以尝试避免使用!important 使您的选择器更具体，例如：

.btn.btn-自定义

检查Codepen

【讨论】：

优秀的答案