javascript - 鼠标移出后如何保持可见的div

Question

我有视图并且我想open-ebooks在鼠标悬停时打开一个 divebooks_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");
    });