javascript - Bootstrap 3 按钮悬停/焦点状态

Question

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

有办法改变吗？我知道这只是一个外观问题，但我希望当鼠标悬停时悬停状态消失，但仍然有另一个独特的功能来知道按钮有焦点。

我不知道这是我浏览器的问题还是真的有意为之(或错误？)。

我使用的是最新的 Chrome。 (版本 34.0.1847.131m)

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

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

--

更新:

我已经尝试覆盖默认的焦点/悬停样式，但现在即使您将鼠标悬停在按钮上，按钮也会停留在焦点状态。有办法克服这个吗？似乎焦点状态在样式上比悬停具有更高的优先级。

-- 谢谢大佬指点。 尽管处于焦点中但仍具有明显的悬停状态的预期行为，需要重新定义悬停状态。

我添加的 css 是这样的:

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

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

Answer 1

您可以覆盖 Bootstrap 样式。首先确保您的样式表或样式声明是在 Bootstrap 之后添加的，例如:

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

然后在你的CSS中:

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