Javascript 鼠标退出后如何保持可见div

我有视图，当鼠标移到

ebooks\u容器上时，我想打开一个
openebooks
div，这工作正常。但是当鼠标在
打开电子书
上打开时，这是隐藏的，我想保持打开状态

<div> <a id="ebooks_container"><%=get_ebook_status %> ebooks is added</a> 
</div>
<div class="open_ebooks">This is test <br> No one can purchase it </div>

和
CSS

#ebooks_container {
  background-color: activeborder;
  font-size: 20px;
  width: 100%;
  cursor: pointer;
}

.open_ebooks{
  display: none;
  width:100%;
}

.open_ebooks_display{
  display: block !important
}

尝试在底部函数中添加.show（），类似这样

$(".open_ebooks").show().addClass("open_ebooks_display");

使用slideUp和slideDown显示垂直显示/隐藏动画

 $('a#ebooks_container').mouseover(
    function () {
      $(".open_ebooks").slideDown("slow");        
      $(".open_ebooks").addClass("open_ebooks_display");
    }
  ); 

 $('a#ebooks_container').mouseleave(function () {
     $(".open_ebooks").removeClass("open_ebooks_display");
     $(".open_ebooks").slideUp("slow");
    });

我们甚至需要CSS来继续。
 $('a#ebooks_container').mouseover(
    function () {
      $(".open_ebooks").slideDown("slow");        
      $(".open_ebooks").addClass("open_ebooks_display");
    }
  ); 

 $('a#ebooks_container').mouseleave(function () {
     $(".open_ebooks").removeClass("open_ebooks_display");
     $(".open_ebooks").slideUp("slow");
    });