javascript - 如何在jquery中实现mouseleave

Question

我在 jquery 中滑动有一个小问题。在悬停(鼠标悬停)时，我需要我的导航列表项通过向下滑动来显示其内容，而在鼠标移出时它应该向上滑动。

HTML:

<ul class="nav nav-tabs nav-stacked">
     <li  id = "mousehover">
       <a style="background-color:#f78144; color: #000; text-align:  center;" href="#">Time Table
      </a>
    </li>
</ul>

<div id = "hovercontent">
     Contents 1 
</div>

Javascript:

<script type="text/javascript">
$(document).ready(function(){

    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });

    $("#hovercontent").mouseleave(function(){
        $(this).slideUp("slow");
    });

 });
</script>

这里的问题是，当我悬停在列表上时，div 会向下滑动，但只有当我悬停在 div 上并离开导航栏后，div 才会向上滑动。我需要 div 向上滑动，即使我在没有进入 div 的情况下将鼠标移出列表。如何做到这一点？

Answer 1

最好使用 mouseover 和 mouseout 会为你做..

$("#hovercontent").bind("mouseout", function() {
     $(this).slideUp("slow");
});