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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27446214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:59:48  来源:igfitidea点击:

How to change text color in button hover property

htmlcsstwitter-bootstrapbuttonhover

提问by Filippo

I used this guide to customize buttons in a web page I've made with bootstrap:

我使用本指南来自定义我用引导程序制作的网页中的按钮:

Change hover color on a button with Bootstrap customization

使用 Bootstrap 自定义更改按钮上的悬停颜色

The problem is that I can't manage to keep the same font-color in hover and I can't explain why it always changes to dark grey. Here's the code: http://codepen.io/anon/pen/ByKZZK

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

HTML:

HTML:

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

<button href="mailto:[email protected]" class="btn btn-custom btn-lg btn-block">[email protected]&nbsp; <span class="glyphicon glyphicon-envelope"></span></button>

CSS:

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*/
}

Any ideas?

有任何想法吗?

采纳答案by DaniP

Seems like some way the .btnclass of bootstrap is getting more weight on your codepen, you can try to avoid the !importantmaking more specific your selector like:

似乎以某种方式.btn引导程序类在您的代码笔上获得了更多的权重,您可以尝试避免!important使您的选择器更具体,例如:

.btn.btn-custom

.btn.btn-自定义

Check the Codepen

检查代码笔

回答by Rvervuurt

Just add !important;to the color: #FFD180in the hoverpart of your CSS.

只需添加!important;color: #FFD180hover你的CSS的一部分。

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

Edit: The color (#333) probably comes from this line in the bootstrap.min.css

编辑:颜色(#333)可能来自 bootstrap.min.css

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