html - Bootstrap : Why does input group button revert to default grey when mouse away?

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: ... }