Оптимизация скрытия и отображения элементов html

Question

Я знаю, что этот код уже невелик, но мне нужна помощь в его оптимизации, поскольку я чувствую, что не достаточно jquery, чтобы сделать этот код более эффективным. Поэтому идея заключается в том, когда вы наводите курсор на #desno, #loginbox появляется, и когда вы наводите на него курсор, он продолжает отображаться. Он получает скрыт, когда мышь покидает как #desno и #loginbox

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

<script type="text/javascript"> 
    $(document).ready(
     function() { 
      $("#desno").mouseover(function() { 
       $("#loginbox").fadeIn("fast"); 
      }); 
      $("#desno").mouseout(function() { 
       $("#loginbox").hide(); 
      }); 
      $("#loginbox").mouseover(function() { 
       $("#loginbox").show(); 
      }); 
      $("#loginbox").mouseout(function() { 
       $("#loginbox").hide(); 
      }); 
     }); 
</script> 

Да, любая помощь будет оценена. Мне также понравилось бы, если бы вы объяснили, что и как вы это сделали, и каков был процесс размышлений.

Answer 1

$(document).ready(
    function() { 
     $("#desno,#loginbox").mouseover(function() { 
      $("#loginbox").show(); 
     }); 
     $("#desno,#loginbox").mouseout(function() { 
      $("#loginbox").hide(); 
     }); 
    }); 

Я ответил своим собственным вопросом благодаря вам, ребята.

Answer 2

Попробуйте изменить шрифт вашего редактора на меньший размер.

---

Я буду считать, что #loginbox является дочерним #desno и дать вам это:

#loginbox {display:none} 
 
#desno:hover #loginbox {display:block}

<div id="desno"> 
 
    I am desno 
 
    <div id="loginbox">I am loginbox</div> 
 
</div>

Успехов получая ничего меньшего, чем это.