javascript - マウスアウト後に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

縦の表示/非表示のアニメーションを表示するには、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");
    });