bootstrap 3按钮悬停/焦点状态
bootstrap 3按钮悬停/焦点状态
提问于 2014-05-15 10:07:52
Bootstrap 3的按钮悬停状态与其焦点状态完全相同。
有没有办法改变这一点？我知道这只是一个表面上的问题，但我希望当鼠标悬停离开时，鼠标的悬停状态会消失，但仍然有另一个明显的功能，即知道按钮具有焦点。
我不知道这是我的浏览器的问题，还是它真的是故意的(或者一个bug?)。
我使用的是Chrome最新版本。(版本34.0.1847.131 m)
链接到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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-15 10:38:08
您可以覆盖引导程序样式。首先，确保在bootstrap之后添加样式表或样式声明，例如：
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">然后在你的css中：
.btn:focus {
background-color: red;
}Stack Overflow用户
发布于 2017-03-15 03:11:04
无需覆盖样式，只需将单击事件设为来自jquery的.blur()即可。它将移除点击时的焦点，并解决问题！
Stack Overflow用户
发布于 2018-12-02 15:14:06
任何正在寻找Bootstrap 4的人，都可以在你的自定义样式CSS文件中尝试一下
.btn-dark:hover, .btn-dark.active {
background: #31bda5;
box-shadow: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23668104
复制相关文章
相似问题
腾讯云开发者
