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

在中。btn:悬停：{背景位置：0-15px；} ，将-15更改为-30可以工作。但可能不是你真正的意图。

Answer 2

这是因为背景位置： 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

你有：背景位置： 0-15px；

将-15px更改为30。

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