Bootstrap按钮组悬停颜色更改

Question

我正在使用Bootstrap按钮组作为一系列复选框。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

有关工作示例，请参阅http://getbootstrap.com/javascript/#buttons复选框部分。

将鼠标悬停在未选中的按钮上时，它会变为与选中按钮相同的颜色。如果您然后单击按钮它不会改变颜色，因为它已经与选中的按钮颜色相同。因此，您必须将鼠标移离按钮以验证您是否已正确地单击它。显然，从已检查状态转换为未检查状态时会出现类似问题。我认为这对我的用户来说有点混乱。有没有办法让Bootstrap按钮在悬停时不改变颜色？

Answer 1

事实上，:hover和:active按钮之间存在差异，您可以在按钮上看到一个轻微的阴影。

您可以使用此代码强化此阴影（适用于每个按钮，无论颜色如何）：

.btn:active,
.btn.active {
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

结果：

Answer 2

作为一项解决方案，我目前正在覆盖我使用按钮组的页面上的悬停颜色，以便用户至少可以看到悬停与选择按钮的操作不同。< / p>

.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff;
  background-color: #428bff;
  border-color: #357ebd;
}