为什么不能在Bootstrap按钮上覆盖CSS背景颜色？

Question

我想要发生什么

实际发生了什么

我想切换red-background类，以便当鼠标悬停在button-bullet上时，它会将background-color更改为#FCC1C5。

我不想使用.btn.button-bullet:hover，因为我有一些jQuery逻辑，当屏幕上只有一个子弹元素时，它会禁止显示删除按钮。

出于某种原因，当我toggleClass("red-background")时，什么都没有出现。

我认为可能是因为在CSS中，我将.btn.button-bullet＆＃39; background-color设置为transparent。所以如果这是问题，我如何覆盖jQuery中的background-color？

代码

HTML 的

<div class="worksheet-problems">
  <div class="row">
    <div class="col-lg-7">
      <div class="form-group">
        <div class="input-group input-group-lg worksheet-problem">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default button-bullet"> <span class="glyphicon glyphicon-one-fine-dot" 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" class="btn btn-default button-add" aria-label="Add"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.red-background{
  background-color: #FCC1C5;
}
/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-bullet{
  background-color: transparent;
}

的jQuery

$(document).ready(function() {
  $(".worksheet-problems").on("mouseenter mouseleave", ".button-bullet", function() {
    if ($(".worksheet-problems").children().length > 1) {
      $(this).children(".glyphicon").toggleClass("glyphicon-one-fine-dot");
      $(this).toggleClass("red-background");
      $(this).children(".glyphicon").toggleClass("glyphicon-minus-sign");
    }
  });
});

JSFiddle

Answer 1

问题：您的public static DataSet GetProducts() { ProductManagerService.ProductManagerClient proxy = new ProductManagerService.ProductManagerClient(); DataSet productSet = proxy.GetProducts(); productSet = MapTables(productSet); return productSet; } 类的特异性低于red-background。

解决方案（添加更多特异性并将其置于具有透明背景的选择器之后）：

.btn.button-bullet

Answer 2

看起来像

$(this).toggleClass("red-background"); 

ain是背景元素。因此，请检查您实际改变的元素：

console.log($(this)); 

检查它实际上是你要改变的正确元素。一个黑客 有时，但可以使用寿命：

.red-background{
    background-color: #FCC1C5 !important;
}

但问题也可能在于引导样式比你的css类具有更高的优先级。使它更具体。