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 ; 
}