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; }
解决方法
您可以覆盖引导程序样式.首先确保在bootstrap之后添加样式表或样式声明,例如:
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <link rel="stylesheet" href="/stylesheets/styles.css">
然后在你的CSS中:
.btn:focus { background-color: red; }