jquery - jQuery hover - 如何使 div 出现在悬停时，然后保持可见

Question

我有一个下拉登录框，当用户将光标悬停在“登录触发器”上时显示，这只是一个图像。出现下拉菜单后，我希望能够将鼠标悬停在“登录框”元素（下拉菜单）上而不会消失，这就是现在正在发生的事情。有没有办法让它在鼠标悬停在触发器和下拉菜单本身时保持在视图中，并且只有当光标没有悬停在这些元素上时才会消失？

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

Answer 1

简单的解决方案是将元素嵌套在一个公共容器中，并将鼠标事件附加到该容器：

<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)
        );
    }
});

小提琴

Answer 2

您可以简单地添加#login-box.#login-trigger

然后当你悬停时#login-box，你也将悬停#login-trigger