Question

128

Change background color of div using conditional statement

rated 0 times [ 135] [ 7] / answers: 1 / hits: 34496 / 10 Years ago, thu, july 10, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

amari

Add To Favorites

Follow

Total Points: 736

Total Questions: 111

Total Answers: 90

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

amari questions

1 Do SubmitEvents made by a 'submit' event contain the form values?

Mon, May 23, 22, 00:00, 2 Years ago

1 ERR_UNHANDLED_REJECTION UnhandledPromiseRejection when awaited inside an array of promise Objects

Mon, Jun 21, 21, 00:00, 3 Years ago

1 Dropdown with Search Box using Bootstrap Selectpicker not working

Thu, Jun 3, 21, 00:00, 3 Years ago

1 Redux-Toolkit: How to reject a createAsyncThunk?

Sat, May 15, 21, 00:00, 3 Years ago

1 Webpack, optimization chunking gives Conflict: Multiple chunks emit assets to the same filename error

Wed, Mar 3, 21, 00:00, 3 Years ago

View All

answered 10 Years ago draven · Accepted Answer

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>