Html 使用 Bootstrap 自定义更改按钮上的悬停颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25923623/
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
Change hover color on a button with Bootstrap customization
提问by Amir Shadaab Mohammed
I am trying to style my buttons in a way that the hover makes the button a lighter shade instead of a darker shade. I tried bootstrap customization page(http://getbootstrap.com/customize/) and it doesn't give me an option to change the button hover color. I tried doing this manually by inspecting the CSS but it is unclear how the buttons are getting the hover color. I tried another bootstrap customization website
我试图以悬停使按钮变浅而不是变深的方式来设计我的按钮。我尝试了引导程序自定义页面（http://getbootstrap.com/customize/），但它没有给我更改按钮悬停颜色的选项。我尝试通过检查 CSS 手动执行此操作，但尚不清楚按钮如何获得悬停颜色。我尝试了另一个引导自定义网站
http://pikock.github.io/bootstrap-magic/app/#!/editor
http://pikock.github.io/bootstrap-magic/app/#!/editor
I wanted the main color to be #0495c9 and the hover color to be #00b3db but I am only able to specify the button bg color and not it's hover color.
我希望主要颜色为 #0495c9，悬停颜色为 #00b3db，但我只能指定按钮 bg 颜色而不是悬停颜色。
Any help will be appreciated
任何帮助将不胜感激
回答by jme11
The color for your buttons comes from the btn-x classes (e.g., btn-primary, btn-success), so if you want to manually change the colors by writing your own custom css rules, you'll need to change:
按钮的颜色来自 btn-x 类（例如 btn-primary、btn-success），因此如果您想通过编写自己的自定义 css 规则来手动更改颜色，则需要更改：
/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
color: #fff;
background-color: #0495c9;
border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #00b3db;
border-color: #285e8e; /*set the color you want here*/
}
回答by Hel Lo
or can do this...
set all btn ( class name like : .btn-+ $theme-colors: map-merge) styles at one time :
或者可以这样做...一次
设置所有 btn（类名如：.btn-+ $theme-colors: map-merge）样式：
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value,
// modify
$hover-background: lighten($value, 7.5%),
$hover-border: lighten($value, 10%),
$active-background: lighten($value, 10%),
$active-border: lighten($value, 12.5%)
// /modify
);
}
}
// code from "node_modules/bootstrap/scss/_buttons.scss"
should add into your customization scss file.
应该添加到您的自定义 scss 文件中。
回答by jbailey
I had to add !importantto get it to work. I also made my own class button-primary-override.
我必须添加!important才能让它工作。我也做了我自己的类button-primary-override。
.button-primary-override:hover,
.button-primary-override:active,
.button-primary-override:focus,
.button-primary-override:visited{
background-color: #42A5F5 !important;
border-color: #42A5F5 !important;
background-image: none !important;
border: 0 !important;
}
回答by kamlesh.halduniya
This is the correct way to change btn color.
这是更改 btn 颜色的正确方法。
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
color: #fff;
background-color: #F7B432;
border-color: #F7B432;
}
