title: Change background color of div using conditional statement
body: <p>I have 2 divs side by side and by default one is hidden and one is visible.</p>
  
  <p>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)</p>
  
  <p>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.</p>
  
  <p>Here is the code I have so far:</p>
  
  <pre><code>&lt;script&gt; 
  $(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");
          }       
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="http://jsfiddle.net/3rQNb/1/" rel="nofollow"><strong>JSFiddle</strong></a></p>