Twitter引导按钮转换

Question

我正在经历与Twitter Bootstrap相当恼人的冲突。

当我将鼠标悬停在按钮上时，CSS转换仅在悬停时才播放。

这里是我的CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.btn-click-me { 
    color: white !important; 
    background: black !important; 
    -webkit-transition: background linear 350ms; 
} 

.btn-click-me:hover { 
    background: white !important; 
} 

的工作JFiddle演示可以在这里看到：由于在这里看到：http://jsfiddle.net/MgcDU/3805/

Answer 1

它是一种特异性问题bootstrap.css - 默认情况下，所有的按钮有一个过渡 - 你需要做的是在选择器中包含.container类，并且您将覆盖引导并查看两种状态下的预期转换。你可以去排队bootstrap.css的3246或者修改默认的过渡，过渡的.btn:hover, .btn:focus类

原因两类覆盖在这种情况下，两个班是因为使用@import有条件的规则时，导入CSS在您的jsFiddle中写入您的之前的CSS 。如果两个选择具有相同的特异性，在样式表中声明的最新一个将赢得

Example

---

_{通过两个班我指的是：.container .btn-click-me和.btn:hover, btn:focus这同样特定}

Answer 2

如果要查看悬停时悬停的转换，请在转换状态下添加转换：http://jsfiddle.net/MgcDU/3821/

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.btn-click-me { 
    color: white; 
    -webkit-transition: background linear 350ms; 
    background: black; 

} 

.btn-click-me:hover { 
-webkit-transition: background linear 350ms; 
    background: white ; 
}