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

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

• javascript
• jquery
• html
• css

• 1 It would be great if you make a JSFiddle and post it... – j809 Commented Jul 10, 2014 at 14:24
• Probably because the loginBox is sliding so it is still visible when the check is performed – Huangism Commented Jul 10, 2014 at 14:25
• yeah please provide a jsffidle please.. – MickyScion Commented Jul 10, 2014 at 14:26
• 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 Commented Jul 10, 2014 at 14:28
• 1 @user3787555 add jquery jsfiddle.net/3rQNb/1 – Huangism Commented Jul 10, 2014 at 14:29

2 Answers 2

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>

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