Fading when hover over an outside Div

Here is my problem

I have something like this:

-----------------
|     ------    |
|     |div1|    |
|     ------    |
|div2           |
|---------------|

Here I have a div1 in the middle and there is also the outside div2.

I also have a transparent background for the whole page layer that turns dark depending on some things.

When I enter div1, I want for the background of the body (including div2) to turn black (except div1). ( I DID THIS)

When I exit div1, BUT the mouse is still WITHIN DIV2, I want the background to fade out from black. (THIS WORKS TOO if i don't use the step below).

BUT When I exit div2 I want to fully make the background not visible. This means I should interrupt the fade out.

My problem is that when I go into div1 (I am using mouseenter), it thinks I am leaving div2.

This means that I never get to fade out wi开发者_如何转开发thin div2, but go straight to making the background not visible when I exit div1 (instead of fading it out)

---

use an if statement and create your own fade function that calls fade for example.

var ondiv1 = false
var ondiv2 = false

div1.mouseenter(function(){
   ondiv1 = true;
})

div1.mouseleave(function(){
   ondiv1 = false;
   //fadeout function for div2 called

})

div2.mouseenter(function(){
   ondiv2 = true;
})

div2.mouseleave(function(){
   ondiv2 = false;
   if((ondiv2 == false) && (ondiv1 == false)){
      //call hide background function
   }

})

---

You could do a simple test to check if the newly hovered element is a child of div2.

div2.mouseleave(function(event) {
    // Check if the new mouse target is a child of div2.
    if($(event.currentTarget).parents().is(div2))
        return;

    // Do fade.
});