Question

我有一个按钮组如下：

HTML

<div class="btn-group">
   <button type="button" class="btn btn-default btn-xs  red-outline-button"> Sync </button>
   <button type="button" class="btn btn-default btn-xs  gold-outline-button" data-toggle="dropdown">New PG </button>
  <ul class="dropdown-menu">
    <li><a href="#"> Test1</a></li>
    <li><a href="#"> Test2</a></li>
</ul>
</div>

CSS：

.red-outline-button:hover {
  border-color: #C4213C;
  background-color: #f8d3d9;
  color: #000
}

.gold-outline-button:hover {
  border-color: #B3892F;
  background-color: #f4ebd7;
  color: #000;
}

以上作品。当我将鼠标悬停在按钮上时，颜色会发生变化。但是，当我单击并按住或单击第二个按钮以显示下拉列表时，颜色会切换回默认的灰色。

我已尝试.red-outline-button:active，但这没有帮助。

我的问题是，在以下情况下设置css颜色的正确方法是什么：

按下按钮
下拉列表已打开（仅限按钮。我不需要设置实际下拉列表的样式

Answer 1

您需要覆盖默认 Bootstrap类：

 .btn-default.focus, .btn-default:focus

如果您不想覆盖所有内容，这将有效：

.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {
  border-color: #B3892F;
  background-color: #f4ebd7;
  color: #000;
}

工作演示：http://www.bootply.com/Li7tkXlF9P

希望它对你有所帮助。：）

Answer 2

只需将.gold-outline-button:focus添加到选择器，然后!important将样式添加到默认的Bootstrap样式。

e.g。

.gold-outline-button:hover, .gold-outline-button:focus {
  border-color: #B3892F !important;
  background-color: #f4ebd7 !important;
  color: #000 !important;
}

这应解决两个问题。在此处查看此操作：https://jsfiddle.net/sytc4pc5/

Answer 3

这会修复它点击是另一个事件不会采取悬停属性

 .red-outline-button:hover,.red-outline-button:active,.red-outline-button:focus {
      border-color: #C4213C;
      background-color: #f8d3d9;
      color: #000
    }

    .gold-outline-button:hover,.gold-outline-button:active,.gold-outline-button:focus {
      border-color: #B3892F;
      background-color: #f4ebd7;
      color: #000;
    }

更改引导按钮和下拉切换的颜色

3 个答案: