jQuery悬停 - 如何让div显示在悬停上，然后保持可见

我有一个下拉式登录框，当用户将光标悬停在“登录触发器”上时，会显示这个下拉框，它只是一个图像。一旦下拉菜单出现，我希望能够将鼠标悬停在“登录框”元素（下拉菜单）上，而不会消失，这就是现在发生的情况。当鼠标悬停在触发器和下拉菜单上时，是否有任何方法使其保持在视图中，并且只有在光标未悬停在这些元素上时才会消失？jQuery悬停 - 如何让div显示在悬停上，然后保持可见

<script> 
    $(function() { 
     $("#login-trigger").hover(function() { 
      $("#login-box").slideToggle("slow"); 
     }); 
    }); 
</script>

来源

2013-09-27 OllyBarca

简单的解决方法是窝在一个共同的容器中的元素，并附加鼠标事件到容器：

<div id="container"> 
    <img id="login-trigger" src="image.png" /> 
    <div id="login-box"> 
     <!-- login stuff --> 
    </div> 
</div>

，只是使用CSS：

#container #login-box {display:none;} 
#container:hover #login-box {display:block;}

或JavaScript

$('#container').on('mouseenter mouseleave', function(e) { 
    $('#login-box')[e.type=='mouseenter'?'slideDown':'slideUp']('slow'); 
});

如果这是不可能的，你必须在触发器和盒子上使用超时和事件处理程序，这是一个相当复杂的事情。

$('#login-trigger, #login-box').on({ 
    mouseenter: function(e) { 
     if (e.target.id == 'login-trigger') $('#login-box').slideDown('slow'); 
     clearTimeout($('#login-box').data('timer')); 
    }, 
    mouseleave: function() { 
     $('#login-box').data('timer', 
      setTimeout(function() { 
       $('#login-box').slideUp('slow') 
      }, 300) 
     ); 
    } 
});

FIDDLE

来源

2013-09-27 17:23:53 adeneo