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

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

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

, есть поле

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

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

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

updaite,

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<style>
div.wrap{width:50px;}
div.wrap div{display:none;width:400px;border:1px solid #000;padding:20px;}
</style>

<div class="wrap">
	<a href="#">Ссылка</a>
	<div><input type="text"><input type="text"><input type="button" value="Go"></div>
</div>
<br>
<div class="wrap">
	<a href="#">Ссылка</a>
	<div><input type="text"><input type="text"><input type="button" value="Go"></div>
</div>

<script>
$(function(){
	$(document).click(function(e){
		if ($(e.target).closest('div.wrap').length) return;
		$('div.wrap div').hide();
		e.stopPropagation();
	});
	$('div.wrap a').mouseenter(function(){
		$(this).next().show();
	});
	$('div.wrap').mouseleave(function(){
		var x = 1;
		$('input:text',this).each(function(){
			if (this.value) return x = 0;
		});
		if (x) $('div',this).hide();
	});
});
</script>

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

<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(); // Не знаю что тут происходит
        });
    
});

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

updaite, строки 6 - 24 заменить на:

$('#new-ref,#div-test').mouseleave(function(e){
    if (e.relatedTarget.id == 'new-ref' || e.relatedTarget.id == 'div-test') return;
    if ($('#login').val() || $('#password').val()) return;
    $('#div-test').hide();
});