проверьте ('div') mouseenter на ('a') mouseleave

моя проблема заключается в следующем: Я получил триггер (a) и всплывающее окно (div). Div не вложен в якорь.

• При наведении указателя мыши я хочу, чтобы отображался div.
• Когда я перехожу от a к div, я хочу, чтобы он оставался видимым.
• Когда я выхожу из div, я хочу, чтобы он закрылся.
• Когда я нахожу курсор на элемент и выхожу из него, не входя в div, я хочу, чтобы этот div закрывался.

Я понял большую часть этого, но теперь я борюсь с требованием нет. 2. При проверке нахождения курсора мыши на элементе я проверяю, есть ли центр мыши на элементе div. Если это так, я хочу отменить отпускание мыши. Если нет, я хочу закрыть div.

Что я делаю не так? Это вообще правильный способ сделать это?

Вот разметка:

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

Вот jQuery:

$('.popup_toggle').mouseenter(function() {
        var element = $(this).next('.popup_div');
        $.data(this, 'timer', setTimeout(function() {
            element.show(100);
        }, 500));
    });

    $('.popup_toggle').mouseleave(function() {
        clearTimeout($.data(this, 'timer'));
            if($('.popup_div').mouseenter==true)
            {
                return false;
            }
            else
            {
                $('.popup_div').hide(100)
            };
    });