消除 bootstrap 悬停和焦点可见性

Question

我有一组按钮用作检查按钮，如下所示：

<div class="btn-group">
    <button type="button" id="slct-A" class="btn btn-primary" data-toggle="button">A</button>
    <button type="button" id="slct-B" class="btn btn-primary" data-toggle="button">B</button>
    <button type="button" id="slct-C" class="btn btn-primary" data-toggle="button">C</button>
</div>

用户应该始终能够看到什么按钮是 "pressed"（即 "active"），什么不是，bootstrap 3 通过使 "active" 状态比非 "active" 状态更暗。我的问题是 bootstrap 还会更改悬停和焦点状态下的背景颜色，因此当用户按下按钮时，他看不到状态变化，直到他点击离开。正如其他线程中所建议的那样，我通过在 "click" 处理程序的末尾调用 trigger("blur") 来解决这个问题——但是当用户按下按钮时，他仍然没有得到按钮的立即反馈因为他只看到 "hover" 背景颜色，所以一直被按下。我无法在 css 中重新编程悬停颜色，因为我希望颜色根据当前活动状态动态变化，而不管悬停如何。谢谢。我确实看到了一些建议，根据我的理解，这意味着更改我的 bootstrap 版本 - 我真的不想那样做......非常感谢你的帮助......

Answer 1

您可以构建自己的 btn-class 来解决这个问题，就像我在这里所做的那样：

CSS:

.btn-myown {
  color: #fff !important;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-myown.active {
  background-color: #286090;
  border-color: #204d74;
}
.btn-myown:hover {
  background-color: #286090;
  border-color: #204d74;
}

HTML:

<div class="btn-group">
    <button class="btn btn-myown" id="slct-A" type="button" data-toggle="button">A</button>
    <button class="btn btn-myown" id="slct-B" type="button" data-toggle="button">B</button>
    <button class="btn btn-myown" id="slct-C" type="button" data-toggle="button">C</button>
</div>

Bootply: https://www.bootply.com/yhoEhJdyCx

消除 bootstrap 悬停和焦点可见性

eliminate bootstrap hover and focus visibility

focus

hover

twitter-bootstrap-3