CSSブートストラップボタンの変更。ホバリングすると色が半分しか変わらない

Question

私のCSSに何が問題なのかよく分かりません。私は、デフォルトのブートストラップカラーを変更することで、新しい色で "btn-success2"という新しいクラスを作成しようとしています。ホバリングカラーを白に設定しようとしていますが、半分しか変化しません。上部はまだ同じ緑色です。

次のように私のコード：

.btn-success2:hover, 
.btn-success2:focus, 
.btn-success2:active, 
.btn-success2.active, 
.btn-success2.disabled, 
.btn-success2[disabled] { 
    color: #ffffff; 
    background-color: #fff; 
    *background-color: #fff; 
} 

.btn-success2:active, 
.btn-success2.active { 
    background-color: #6cc334 \9; 
} 

jsfiddle：https://jsfiddle.net/ms4uk83e/

Answer 1

あなたは：background-position：0 -15px;

変更.btn:hoverで30

.btn:hover, .btn:focus { 
    background-position: 0 -30px; 
} 

Answer 2

それは理由のbackground-positionのだ：0 -15px; .btn：ホバー、 .btn：フォーカスクラス。これを試してみてください

.btn:hover, 
.btn:focus { 
    color: #333333; 
    text-decoration: none; 
    background-position: 0 -30px; 
    -webkit-transition: background-position 0.1s linear; 
    -moz-transition: background-position 0.1s linear; 
    -o-transition: background-position 0.1s linear; 
    transition: background-position 0.1s linear; 
} 

Answer 3

に-15px：{background-position: 0 -15px;}、-30へ 変更-15が動作することができます。しかし、本当の意図はないかもしれません。

Answer 4

私は最近、同じ問題を抱えていたが、私は次のコードが以前働いていたし、他のいくつかの変更は、この問題を引き起こしていた知っていた：

.btn:hover, 
.btn:focus { 
    background-position: 0 -15px; 
} 

だから私はからbackground-positionを変更する他の答えの提案に懐疑的でした-15pxから-30pxまで、また、私はブートストラップコードから、ストックボタンにもホバー/フォーカスのための-15pxがあることがわかりました。

私の特定のbtnタイプ（私の場合は.btn-primary）に対して重複したCSS宣言がありました。 重複したCSSを削除すると、の問題が解決されました。