Jquery onmouseover показать снаружи div и спрятать на mouseleave

Я новичок в JQuery.

Я пытаюсь показать и скрыть ousider div на mouserover и mouseleave.

Он работает отлично как mouserover и mouseleave, но не хочет скрывать div, если я нахожусь на одном div.

Какой трюк я должен использовать, так что div не должен прятаться на мышином плече в том же div.

любая рабочая ссылка? поэтому я могу получить любую помощь?

Я попробовал это просто,

скрипка Ссылка

HTML/CSS:

<div id="hover-me">Hover Me </div>
<div class="show-me">
    show this div
</div>

.show-me {
   display : none; 
   width:100%;
    background:black;
    color:#fff;
}

Jquery:

$("#hover-me").mouseenter(function() {
    $(".show-me").slideDown();
});
$("#hover-me").mouseleave(function() {
    $(".show-me").slideUp();
});