如何在鼠标移出后保持可见div

Question

我有视图，我想打开一个open-ebooks的div当鼠标放在ebooks_container上，这是工作正常。但当打开时，将鼠标移到open-ebooks上，但这是隐藏的，我想保持打开状态。

<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>

和js

 $('a#ebooks_container').mouseover(
    function () {
      $(".open_ebooks").animate({height: 80},"slow");
      $(".open_ebooks").addClass("open_ebooks_display");
    }
  );   

$('a#ebooks_container').mouseleave(
   function () {
     $(".open_ebooks").removeClass("open_ebooks_display");
     $(".open_ebooks").hide().animate({height:'20px'}, 1000)
   }
 );                 

$(".open_ebooks").mouseover(
  function () {
    $(".open_ebooks").animate({height: 80},"slow");
    $(".open_ebooks").addClass("open_ebooks_display");
  }
);   

和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
}

Answer 1

尝试在您的底部函数中添加.show()，如下所示

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

Answer 2

使用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");
    });