css - Bootstrap 按钮在点击时没有改变吗？

Question

我是 bootstrap 的新手，我正在尝试制作一组​​按钮，这些按钮仅在单击时执行操作，而不执行其他操作(例如，不更改按钮填充的颜色，不改变轮廓颜色，让它像导航栏按钮一样保持不变 here. )

这是我目前所拥有的:

.btn-default {
  font-family: Monospace;
  font-size: 20px;
  color: #F5C173;
  background-color: #8F390D;
  border-color: #8F390D;
  border-radius: 0px;
}

.btn-default:hover {
  background-color: #8F390D;
  border-color: #8F390D;
  color: #9F590D;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), -2px 2px 2px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.1);
}

这里是我声明按钮的地方:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <button type="button" class="btn navbar-btn btn-default" style="float: right">about</button>
    <button type="button" class="btn navbar-btn btn-default" style="float: right">portfolio</button>
    <button type="button" class="btn navbar-btn btn-default" style="float: right">contact</button>
  </div>
</nav>

基本上，无论是否单击按钮，我都希望悬停效果持续存在。

谢谢!

Answer 1

只需在您希望保持不变的所有内容后面添加 important，就像这样:

.btn-default {
  font-family: Monospace;
  font-size: 20px;
  color: #F5C173!important;
  background-color: #8F390D!important;
  border-color: #8F390D!important;
  border-radius: 0px;
  box-shadow: none!important;
}

.btn-default:hover {
  background-color: #8F390D!important;
  border-color: #8F390D!important;
  color: #9F590D!important;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), -2px 2px 2px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.1)!important;
}