Показать div при наведении / jQuery
 

Здравствуйте, только начинаю осваивать jQuery.
Есть ссылка

<a id="new-ref" href="#">текст</a>

, есть поле

<div id="div-test">
 при наведении, всплывает div
</div>

Нужно при наведении на ссылку отобразить поле div, (поле div находится прямо под ссылкой поэтому можно сразу перенести курсор в поле).
1) Условия закрытия div: если курсор НЕ находиться над ссылкой и он не в поле div закрыть div.
2) Дополнение к первому условию: На поле div есть поля ввода текста, если поля пустые следовать первому условию, если нет, то закрывать только по клику в не элементов div и ссылки.

Подскажите пожалуйста как такую задумку реализовать?

А как сделать что бы тоже самые работала при условии что элементы расположены именно вот так.
И проверка полей на пустоту осуществлялась именно в блоке

<div id="show-div">

<a id="ssilka" href="#">Ссылка</a>
<div id="show-div">
    <input type="text">
    <input type="text">
    <input type="button" value="Go">
</div>

И прокомментируйте пожалуйста скрипт, чтобы я понимал как он работает на будоющие, а то некоторые моменты мне не совсем понятны, спасибо.

Реализовал вот так.

<a id="new-ref" href="#">текст</a>
<div id="div-test">
 <input id="login" type="text">
 <input id="password" type="text">
</div>

$(function(){
    $('#new-ref').mouseenter(function(){ // Навели на ссылку?
      $( "#div-test" ).show(); // Показываем блок
    });

    $("#new-ref").mouseleave(function(event ){ // курсор ушел с ссылки?
        event = event || window.event   // Не знаю что тут происходит
        var relTarg = event.relatedTarget || event.toElement   // Определяем куда курсор ушел
        if (relTarg.id != 'div-test')  
        {
            if ($("input[id='login']").val().length != 0) return; // есть текст в input? -> return
            $( "#div-test" ).hide();  // Скрываем блок
        }
     });
    
   $("#div-test").mouseleave(function(event ){  // курсор ушел с блока?
        event = event || window.event  // Не знаю что тут происходит
        var relTarg = event.relatedTarget || event.toElement // Определяем куда курсор ушел
        if (relTarg.id != 'new-ref')
          {
             if ($("input[id='login']").val().length != 0) return; // есть текст в input? -> return
             $( "#div-test" ).hide();  // Скрываем блок
          }
   });
   
    $(document).click(function(e){ // Функция скрывает элемент если произошёл клик в не поля #div-test
            if ($(e.target).closest('#div-test').length) return;  // Не знаю что тут происходит
            $('#div-test').hide(); // Скрываем блок
            e.stopPropagation(); // Не знаю что тут происходит
        });
    
});

Насколько это правильно?