bootstrap 3按钮悬停/对焦状态 [英] bootstrap 3 button hover/focus state

问题描述

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

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

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

我使用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; 
} 
  

解决方案

。首先确保您的样式表或样式声明在引导后添加，例如：

 < link rel =stylesheethref = /stylesheets/bootstrap.min.css\"> 
< link rel =stylesheethref =/ stylesheets / styles.css> 
  

然后在您的css：

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

Bootstrap 3's buttons' hover state looks exactly the same with its focus state.

Is there a way to change this? I know it's just a cosmetic issue, but I want the hover state to go away when the mouse hovers away, yet still have another distinct feature to know the button has focus.

I don't know if this is my browser's issue or it is really intended (or a bug?).

I'm using Chrome latest. (Version 34.0.1847.131 m)

Link to Bootstrap 3 button samples. http://getbootstrap.com/css/?#buttons-tags

Click on the 3rd button labelled "Input" and move mouse out.

--

Update:

I've tried overriding the default focus/hover styles, but now the button is stuck in the focus state even when you mouseover it. Is there a way to get over this? It seems the focus state has higher priority in styles than hover.

-- Thanks for the pointers guys. For the intended behavior of still having a distinct hover state despite being in focus, the hover state needed to be redefined again.

The css I added went like this:

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

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

解决方案

You can override the bootstrap styles. First make sure your stylesheet or style declaration is added after bootstrap, for example:

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

Then in your css:

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

这篇关于bootstrap 3按钮悬停/对焦状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！