bootstrap 3按钮悬停/焦点状态答案

【问题标题】：bootstrap 3 button hover/focus statebootstrap 3按钮悬停/焦点状态
【发布时间】：2014-07-03 07:15:38
【问题描述】：

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

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

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

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

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

更新：

我尝试过覆盖默认的焦点/悬停样式，但现在即使您将鼠标悬停在按钮上，按钮也会卡在焦点状态。有没有办法克服这个问题？看起来焦点状态在样式中的优先级高于悬停。

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

我添加的 css 是这样的：

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

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

【问题讨论】：

按照 bootstrap 的建议，在 bootstrap 样式表之后添加自定义样式表，并将 .btn:active 定义为其他内容：getbootstrap.com/getting-started/#customizing
此外，如果您想为悬停和焦点设置不同的样式，请定义 .btn-default:hover 和 .btn-default:focus（或使用 .btn-primary、.btn-success、 .btn-danger, .btn-info, .btn-warning)

【解决方案1】：

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

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

然后在你的 css 中：

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

【讨论】：

谢谢！有时，我会担心再次下载自定义版本，或者想知道是否只有一个简单的 css 覆盖。
我尝试使用它覆盖它，但是当我将鼠标悬停在按钮上时，悬停状态不再出现。它卡在活动状态。
你使用的是 :active 还是 :focus ？ :active 应该在按下鼠标时触发，当您按下按钮时应该触发焦点。
我改变了：focus。 .btn-default:focus{background-color: #ffffff;} 即使鼠标悬停，按钮外观也会卡在焦点上。
好吧，我似乎已经成功了。在.focus 覆盖之后，显然，您需要再次重新定义.hover 样式。

【解决方案2】：

不要覆盖样式，只需从 jquery 制作点击事件 .blur() 即可。它将消除对点击的关注并解决问题！

【讨论】：

【解决方案3】：

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

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

【讨论】：