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

Posted 2023-03-06

【中文标题】使用 Bootstrap 自定义更改按钮上的悬停颜色

【英文标题】：Change hover color on a button with Bootstrap customization

【发布时间】：2014-11-13 10:34:45

【问题描述】：

我正在尝试以悬停按钮使按钮的颜色变浅而不是变深的方式来设置按钮的样式。我尝试了引导自定义页面（http://getbootstrap.com/customize/），但它没有给我更改按钮悬停颜色的选项。我尝试通过检查 CSS 手动执行此操作，但尚不清楚按钮如何获得悬停颜色。我尝试了另一个引导程序定制网站

http://pikock.github.io/bootstrap-magic/app/#!/editor

我希望主颜色为#0495c9，悬停颜色为#00b3db，但我只能指定按钮的背景颜色，而不是悬停颜色。

任何帮助将不胜感激

【问题讨论】：

您可以发布您的代码或 jsFiddle 的链接吗？你不能简单地使用button background-color: #0495c9 和button:hover background-color: #00b3db 吗？

【参考方案1】：

按钮的颜色来自 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*/

【讨论】：

另外你可能还想设置.btn-primary:active:focus来防止它闪烁。

如果它不起作用，请在每种颜色后添加 !important

【参考方案2】：

或者可以这样做... 一次性设置所有 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"

应添加到您的自定义 scss 文件中。

【讨论】：

你应该为那些不太了解 SASS 的人添加更好的解释和适当的例子。

【参考方案3】：

我必须添加 !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;

【参考方案4】：

这是改变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;
    

【讨论】：

为什么你的例子中没有:hover？