Bootstrap 按钮组悬停颜色变化答案

【问题标题】：Bootstrap button group hover colour changeBootstrap 按钮组悬停颜色变化
【发布时间】：2013-12-19 22:44:30
【问题描述】：

我将 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 Checkbox 部分。

当您将鼠标悬停在未选中按钮上时，它会变为与选中按钮相同的颜色。如果您然后单击按钮，它不会改变颜色，因为它已经与选中按钮的颜色相同。因此，您必须将鼠标从按钮上移开，以验证您实际上是否正确单击了它。显然，当从选中状态移动到未选中状态时，也会出现类似的问题。我认为这对我的用户来说有点令人困惑。有什么方法可以让 Bootstrap 按钮在悬停时不改变颜色？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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);
}

结果：

【讨论】：

谢谢。从视觉的角度来看，我不太喜欢盒子阴影样式，所以我最终将您的答案和我的答案结合起来，并更改了该特定页面的活动按钮上的背景颜色和边框颜色属性。

【解决方案2】：

作为一种解决方法，我目前正在使用按钮组覆盖页面上的悬停颜色，以便用户至少可以看到悬停是与选择按钮不同的活动。

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

【讨论】：