消除引导悬停和焦点可见性

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>

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

Answer 1

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

---

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>

---

引导层：https://www.bootply.com/yhoEhJdyCx