Change hover class with JQuery

Question

I am exploring a way to to change the background colour of div OR change its class when a select box is checked. I can't figure it out because I can't understand what the best approach would be. I have replicated what I have done here: https://jsfiddle.net/c8qremy2/

<input type="checkbox" name="blue" value=".cp" id="cp"><label for="blue">Couch Potato</label>

So by checking the above checkbox is it possible to change the background colour of the below div:

  <div class="item cp sp cf bb" id="launDroid">
    <a href="" class="bgRed">
      <div class="content">
      <h2>Laundroid</h2>
      <p>Laundry That Does Itself</p>
      <div class="tileFooter">Category</div>
      </div>
    </a>
  </div>

The background colour belongs to the to bgRed class. I am wondering if the above checkbox is selected it can change the bgRed class to say bgBlack which would be a black background?

score 1 · Answer 1 · answered Feb 01 '17 at 21:30

1

Yes, jQuery can remove a class and replace it with another class:

$('a').removeClass('bgRed').addClass('bgBlack');

answered Feb 01 '17 at 21:30

AmericanUmlaut

2,817
2
17
27

But how do I target that div, like what is the approach? – PhpDude Feb 01 '17 at 21:30
`$('#launDroid a').removeClass('bgRed').addClass('bgBlack');` would change the class of the a element inside the div, specifically. Is that what you mean? – AmericanUmlaut Feb 01 '17 at 21:32
Note that a shorter way of writing that is `toggleClass('bgRed bgBlack')`. – Heretic Monkey Feb 01 '17 at 21:36
@MikeMcCaughan I think you mean `toggleClass('bgRed', 'bgBlack')` http://api.jquery.com/toggleclass/ – jdmdevdotnet Feb 01 '17 at 21:39
Meant what I said :). See the first overload *One or more class names (separated by spaces) to be toggled for each element in the matched set.* – Heretic Monkey Feb 01 '17 at 21:42

Michael Coker · Accepted Answer · 2017-02-01T21:32:55.693

1

You can monitor the change event and update the rest of the DOM as you see fit. Also, the for attribute on your label should be the id of the input you want it to apply to, not the name attribute.

$('#cp').on('change',function() {
  if ($(this).is(':checked')) {
   $('.bgRed').addClass('bgBlack');
  } else {
   $('.bgRed').removeClass('bgBlack');
  }
})

.item {
  width: 300px;
  height: 300px;
  margin: 0px;
  float: left;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.item a{
  height: 100%;
  width: 100%;
  position: absolute;
}

.item:hover a.bgRed{
 background-color: rgba(232,43, 71, 0.9); 
}

.item:hover a.bgBlack {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="item cp sp cf bb" id="launDroid">
    <a href="" class="bgRed">
      <div class="content">
      <h2>Laundroid</h2>
      <p>Laundry That Does Itself</p>
      <div class="tileFooter">Category</div>
      </div>
    </a>
  </div>
  
  <input type="checkbox" name="blue" value=".cp" id="cp"><label for="cp">Couch Potato</label>

edited Feb 01 '17 at 21:32

answered Feb 01 '17 at 21:31

Michael Coker

52,626
5
64
64

Thats almost what i am looking for but I would like the black to be the hover instead of the red but not replace the non hover background. – PhpDude Feb 01 '17 at 21:32
It does not seem to to work entirely on other checkboxes, I will show you and see if you could help me out? – PhpDude Feb 02 '17 at 11:36
@PhpDude if you have a new problem, you should make a new post. The comments section isn't a place for us to work through things outside of the scope of your question after you've already accepted an answer. – Michael Coker Feb 02 '17 at 16:42
the issue with that is people start down voting. Marking it as a duplicate etc. Thanks for you help though Mark I do appreciate it. – PhpDude Feb 03 '17 at 11:31

score 1 · Answer 3 · edited May 23 '17 at 10:29

1

What you will need to do is set a watch for when the toggle is changed and then check whether or not the property is checked. You can do this with jQuery. I have updated the jsfiddle here: https://jsfiddle.net/c8qremy2/2/

Also refer to this question here to see how to check if a checkbox is checked with jQuery: How to check whether a checkbox is checked in jQuery?

The jQuery (this makes the checkbox toggle the bg from black to white):

$('#cp').click(function() {
  if($('#cehcekc').prop('checked')) {
    $('.bgRed').css('background-color','#000');
  } else {
    $('.bgRed').css('background-color','#fff');
  }
});

edited May 23 '17 at 10:29

Community

1
1

answered Feb 01 '17 at 21:45

Ian J Miller

83
1
5

That is not what I am after im afraid. I could get it to that point, however the objective is for when I am hovering it would be red, when the checkbox is checked the hover background colour becomes black. – PhpDude Feb 02 '17 at 11:20

Change hover class with JQuery

3 Answers3