I am posting this issue in response to a question I asked a few days ago, I have created a fiddle to hopefully give a more clear explanation. I can hover over a div (with a css hover attribute), have another div pop up on another part of the screen while in mouseover state. have it disappear when i mouseleave. when I click the hover div, the red div that was disappearing and reappearing, stays, and another div pops up (as a popup state). I can click the new blue box to close both blue div, and red div. after the first iteration, I hover over original hover div, and the red div pops up again. only this time, when I mouse leave, the red div remains (does not disappear like it originally did... any tips or tricks would be most helpful. 

```
$('#bg').on({
    mouseover: function () {
        $('#bg2').css('display', 'block');
    },
    mouseleave: function () {
        $('#bg2').css('display', 'none');
    },
    click: function () {
        $('#bg3').css('display', 'block'),
        $('#bg').off('mouseleave');
    }
});

$('#bg3').on({
    click: function () {
        $('#bg3').css('display', 'none'),
        $('#bg2').css('display', 'none');
    }
});

```

<http://jsfiddle.net/skinnyb/0vvk945y/1/>