Question

我正在尝试设置Bootstrap 4按钮的颜色。准确地说，我想在按住鼠标的同时更改btn-primary的颜色。这一定是我必须给按钮着色的一些按钮事件，但似乎不在hover，focus或active中。

在测试中，我得到的类btn-primary的按钮完全是红色的，除了单击时将其变为蓝色。为了创建CSS，我使用了Sass。

我的app.scss文件：

.btn-primary {
    &:hover {
        color: red;
        background-color: red;
    }
    &:focus {
        color: red;
        background-color: red;
    }
    &:active {
        color: red;
        background-color: red;
    }
}

如何在单击按钮时设置按钮的颜色？

Answer 1

与！important一起使用。

.btn-primary:hover {
  color: red;
  background-color: red !important;
}

.btn-primary:focus {
  color: red;
  background-color: orange !important;
}

.btn-primary:active {
  color: white;
  background-color: green !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary">Primary</button>

或者，不使用！important：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-primary:hover {
  color: white;
  background-color: red;
}

.btn-primary:focus {
  color: red;
  background-color: orange;
}

.btn-primary:not(:disabled):not(.disabled):active {
  color: white;
  background-color: green;
}
</style>
<button type="button" class="btn btn-primary">Primary</button>

全局设置自定义Bootstrap 4按钮颜色

1 个答案: