bootstrap 3按钮悬停/焦点状态

Question

Bootstrap 3的按钮的悬停状态与其焦点状态看起来完全相同。

有没有办法改变这个？我知道这只是一个美容问题，但是当鼠标徘徊时，我希望悬停状态消失，但仍然有另一个明显的功能，知道按钮有焦点。

我不知道这是我的浏览器问题还是真的有意（或者是错误？）。

我正在使用Chrome最新版本。 （版本34.0.1847.131 m）

链接到Bootstrap 3按钮示例。 http://getbootstrap.com/css/?#buttons-tags

单击标有“输入”的第3个按钮并移出鼠标。

-

更新

我已尝试覆盖默认的焦点/悬停样式，但现在即使将鼠标悬停在按钮上，该按钮仍会处于焦点状态。有没有办法克服这个？似乎焦点状态在风格上优先于悬停。

- 感谢指点家伙。 对于仍然具有明显悬停状态但仍处于焦点状态的预期行为，需要再次重新定义悬停状态。

我添加的CSS就像这样：

.btn-default:focus,
.btn-default:active,
.btn-default.active
{
  background-color: #ffffff;
}

.btn-default:hover
{
  background-color: #ebebeb;
}

Answer 1

您可以覆盖引导程序样式。首先确保在bootstrap之后添加样式表或样式声明，例如：

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">

然后在你的css中：

.btn:focus {
  background-color: red;
}

Answer 2

不是覆盖样式，而是从jquery创建click事件.blur（）。 它将消除对点击的关注并解决问题！

Answer 3

任何正在寻找Bootstrap 4的人，请在您的自定义样式CSS文件中尝试

.btn-dark:hover, .btn-dark.active {
   background: #31bda5;
   box-shadow: none;
}