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>

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

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悬停和焦点可见性

1 个答案: