Change background color of div using conditional statement

Question

I have 2 divs side by side and by default one is hidden and one is visible.

I have a jQuery function which, when mouseenter the visible div, the hidden one shows. And when mouseenter again, it becomes hidden again. (This is for a login box)

However - I want the always visible div (the mouseenter target) to change color depending on what state the toggled div is in. So far, I can get it to change color upon first mouseenter but it won't change again after that.

Here is the code I have so far:

<script> 
$(document).ready(function () {
    $("#loginBox").hide();
    $("#sideBar").show();

    $('#sideBar').mouseenter(function () {
        $("#loginBox").toggle("slide");
        if ($('#loginBox').is(":visible")) {
            $("#sideBar").css("background-color","blue");
        } else if ($('#loginBox').is(":hidden")) {
            $("#sideBar").css("background-color","yellow");
        }       
    });
});
</script>

So it starts off in its default color (grey by the style sheet) and when mouseenters it loginBox becomes visible and the sideBar turns blue. But when mouseenters again, even though loginBox becomes hidden, the sideBar remains blue.

JSFiddle

Probably because the loginBox is sliding so it is still visible when the check is performed — Huangism
– Huangism, Commented Jul 10, 2014 at 14:25
Damn, I posted the code exactly as it is into jsFiddle but the javascript doesn't work at all: jsfiddle.net/3rQNb Works fine on the site though :( — joshnik
– joshnik, Commented Jul 10, 2014 at 14:28

Huangism · Accepted Answer · 2021-06-23 13:06:47Z

10

You can put the check in the complete function of toggle

$(document).ready(function() {

  $("#aside").hide();
  $("#asidebar").show();

  $('#asidebar').mouseenter(function() {
    $("#aside").toggle("slide", function() {
      var onOrOff = $('#asidebar').css("background-color");
      if ($('#aside').is(":visible")) {
        $("#asidebar").css("background-color", "blue");
      } else if ($('#aside').is(":hidden")) {
        $("#asidebar").css("background-color", "yellow");
      }
    });

  });

});

#asidebar {
  float: right;
  /* top: -205px; */
  position: relative;
  /*
    Editing purposes */
  background-color: rgba(120, 120, 120, 0.5);
  width: 25px;
  /*min height of container */
  height: 400px;
  margin: 5px;
  padding: 1px;
  font-family: helvetica;
}

#aside {
  float: right;
  /* top: -205px; */
  position: relative;
  /*
    Editing purposes
    background-color: blue; */
  width: 250px;
  border-left-style: dashed;
  border-color: rgba(120, 120, 120, 0.5);
  /*min height of container */
  margin: 5px;
  padding: 0;
  font-family: helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="asidebar">Mouse Over</div>
<div id='aside'>Slide box</div>

edited Jun 23, 2021 at 13:06

answered Jul 10, 2014 at 14:33

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joshnik Over a year ago

Works an absolute treat! Thanks a lot. So, I guess in jQuery to pay attention to the queuing of changes?

iCollect.it Ltd Over a year ago

Why else if instead of just else? Are you really expecting something other than visible or hidden? :) If you must go this route (and not classes) just use a ternary operator: jsfiddle.net/TrueBlueAussie/3rQNb/5

Huangism Over a year ago

Yea there is no need for the else if in this case

Ruskin · Accepted Answer · 2014-07-10 14:46:59Z

1

You are better off putting the styles on a class and toggling that instead. Something like

...
$('#sideBar').mouseenter(function () {
    $("#loginBox").toggle("slide");
    $("#sideBar").addClass("semanticallyNamedClassForBlue");
    $("#sideBar").toggleClass("semanticallyNamedClassForYellow");
});
...

CSS:

#sideBar.semanticallyNamedClassForBlue {background: blue}
#sideBar.semanticallyNamedClassForYellow {background: yellow}

as per this jsfiddle adapted from user3787555's http://jsfiddle.net/3rQNb/3/

Explanation:

On load the sidebar is grey.
on first hover both the yellow and blue classes are added to the element, but as the yellow class is last in the css source, it wins the cascade.
on next hover, the yellow class is removed, so the blue now wins.
I added the id to the css rule to get the specificity up enough - as you know a #id beats a .class in the cascade

If you want to learn more, A List Apart's CSS articles and Remy Sharp's JQuery for designers may give you some joy. If you want to learn more on specificity look at star wars specificity super awesome

edited Jul 10, 2014 at 14:46

answered Jul 10, 2014 at 14:29

Ruskin

6,2414 gold badges49 silver badges65 bronze badges

3 Comments

Ruskin Over a year ago

Hope this is the behaviour you were hoping for. Please note the specificity and order of the classes

joshnik Over a year ago

Yeah, that's exactly the behaviour I was looking for. I had no idea you could use classes like that in the CSS. Thanks a lot!

iCollect.it Ltd Over a year ago

+1: Yes. It is preferable (and simpler) to toggle classes rather than modify css styles directly. This should be the correct answer :)

Collectives™ on Stack Overflow

Change background color of div using conditional statement

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related