Desired Outcome
https://i.sstatic.net/EjEXG.gif
Actual Result
https://i.sstatic.net/BmXYG.gif
The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5.
Avoiding the use of
.btn.button-bullet:hover</code due to jQuery logic disabling a button from showing with only one bullet element displayed.</p>
<p>Despite using <code>toggleClass("red-background")Possibly the issue lies in CSS where .btn.button-bullet's background-color is set to transparent. If this is the problem, how can the background-color be overridden using jQuery?
Code Snippets
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;
}
/*remove Bootstrap 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");
}
});
});