Boostrap：当鼠标移开时，为什么输入组按钮会恢复为默认灰色？

Question

这是我的问题的可视化：

我尝试使用CSS更改默认的灰色背景颜色。不知何故，即使我更改了Add-Button和Remove-Button的背景颜色，默认的灰色背景似乎仍然存在。我真的很感激一些帮助！

HTML

<div class="row">
        <div class="col-lg-7">
          <div class="form-group">
            <div class="input-group input-group-lg">
              <div class="input-group-btn">
                <button type="button" id="Remove-Button" class="btn btn-default" aria-label="Remove">
                  <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                </button>
              </div>
              <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
              <div class="input-group-btn">
                <button type="button" id="Add-Button" class="btn btn-default" aria-label="Add">
                  <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

CSS颜色按钮部分

/*Color button & icons*/

#Add-Button:hover {
  background-color: #E5FFFB;
}

#Remove-Button:hover {
  background-color: #FCC1C5;
}

JSFiddle of my code

Answer 1

您可能拥有代码#Add-Button:hover, #Add-Button:focus { background: ... }

Answer 2

问题在于#AddButton:focus，其中bootstrap具有默认的灰色值。如果您想删除它或更改它，您需要将其添加到您的CSS。像这样http://jsfiddle.net/0w1u0dcr/1/

编辑：我只是重读了你的问题，并意识到你想要两个按钮。如果你想在同一个css行中同时定位它们，这是另一个选项http://jsfiddle.net/x7p4s9ug/

Answer 3

Nvm，我通过

解决了我自己的问题

#Add-Button, #Remove-Button {
  background-color: transparent;
}