Why can't you override the CSS background color on the Bootstrap button?

Question

What i want to do

What is really going on

I want to switch the red-background class so that when I hover over the button-bullet it changes its background-color to #FCC1C5 .

I don't want to use .btn.button-bullet:hover , because I have some jQuery logic that disables the delete button, showing when there is only one marker element on the screen.

For some reason, when I toggleClass("red-background") nothing appears.

I think it could be because in CSS I set .btn.button-bullet background-color to transparent . So, if this is a problem, how do I override background-color in jQuery?

code

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

Problem: your red-background class has lower specificity than .btn.button-bullet .

Solution (add more specificity and place it after selectors with a transparent background):

 .btn.button-add, .btn.button-bullet { background-color: transparent; } .btn.red-background { background-color: #FCC1C5; } 

Answer 2

Looks like

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

not a background element. So check which element you are actually modifying:

 console.log($(this)); 

to make sure that this is actually the correct item that you want to change. And hack sometimes, but you can use lifesafer:

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

But the problem may also be that the bootstrap style has higher precision than the css class. Make it more specific.