Close popup div if element loses focus
<p>I have the following scenario: On a label's mouseover event, I display a div. The div must stay open in order to make selections within the div. On the label's mouseout event, the div must dissappear. The problem is that when my cursor moves from the label to the div, the label's mouseout event is fired, which closes the div before I can get there. I have a global boolean variable called <code>canClose</code> which I set to true or false depending on the case in which it must be closed or kept open. I have removed the functionality to close the div on the label's mouseout event for this purpose.
Below is some example code.</p>

<p><strong>EDIT</strong>
I have found a workaround to my problem, event though Alex has also supplied a workable solution.
I added a <code>mouseleave</code> event on the label as well, with a <code>setTimeout</code> function which will execute in 1.5 seconds. This time will give the user enough time to hover over the open div, which will set <code>canClose</code> to false again.</p>

<pre><code>$("#label").live("mouseover", function () {
        FRAMEWORK.RenderPopupCalendar();
    });

$("#label").live("mouseout", function () {
        setTimeout(function(){
            if(canClose){
                FRAMEWORK.RemovePopupCalendar();
            }
        },1500);
    });

    this.RenderPopupCalendar = function () {
        FRAMEWORK.RenderCalendarEvents();
        }
    };


    this.RenderCalendarEvents = function () {
        $(".popupCalendar").mouseenter(function () {
            canClose = false;
        });

        $(".popupCalendar").mouseleave(function () {               
            canClose = true;
            FRAMEWORK.RemovePopupCalendar();
        });
    }

    this.RemovePopupCalendar = function () {
        if (canClose) {
            if ($(".popupCalendar").is(":visible")) {
                $(".popupCalendar").remove();
            }
        }
    };
</code></pre>

<p>Any help please?</p>
