如何更改按钮悬停属性中的文本颜色
Posted
技术标签:
【中文标题】如何更改按钮悬停属性中的文本颜色【英文标题】：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 <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;;
【参考方案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-defaultcolor:#333;background-color:#e6e6e6;border-color:#adadad
【讨论】：
【参考方案2】：似乎.btn 引导类在您的代码笔上越来越重要，您可以尝试避免使用!important 使您的选择器更具体，例如：
.btn.btn-自定义
检查Codepen
【讨论】：
优秀的答案以上是关于如何更改按钮悬停属性中的文本颜色的主要内容，如果未能解决你的问题，请参考以下文章