如何在jquery中实现mouseleave

How to implement mouseleave in jquery

本文关键字：实现 mouseleave jquery      更新时间：2023-09-26

我有一个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。这怎么能做到呢?

最好使用mouseover和mouseout。

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

试着这样把它放到doc ready中:http://jsfiddle.net/ptVbs/

$("#mousehover").hover(function() {
    $("#hovercontent").slideDown("slow");
}, function() {
    if (!$("#hovercontent").hover()) {
        $("#hovercontent").slideUp("slow");
    }
});
$("#hovercontent").mouseleave(function() {
    $(this).slideUp("slow");
});

查看http://www.quirksmode.org/js/events_mouse.html。在事件处理程序中，检查此处描述的relatedTarget。在事件处理程序中使用console.log来跟踪正在发生的事情。不幸的是，如果没有您使用的类的CSS，我无法进一步提供帮助……也许您可以在http://jsbin.com/?

提供JSBin中的测试用例。

try this

$(document).ready(function(){
   $("#mousehover").mouseover(function(){
      $("#hovercontent").slideDown("slow");
   });
   $("#hovercontent ,#mousehover").mouseleave(function(){
       $('#hovercontent').slideUp("slow");
   });
});

在'hover'上尝试event.type您在#mousehover内容上附加一个"悬停"事件处理程序，并且使用event.type，您可以看到正在进行的事件类型。使用事件'hover'，您可以获得mouseenter和mouseleave

$(document).ready(function(){
    ​$('#mousehover').on('hover',function(event){
        switch(event.type){
            case 'mouseenter': $("#hovercontent").slideDown("slow");
                break;
            case 'mouseleave': $("#hovercontent").slideUp("slow");
                break;
        }
    });​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});

我建议使用class:

HTML: 

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

JS: 

<script>
$(document).ready(function(){
    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });
    $(".menu1").mouseout(function(){
        $("#hovercontent").slideUp("slow");
    });
});​
</script>
相关文章：