Question

我有一个下拉登录框，当用户将光标悬停在'login-trigger'上时显示，该登录触发器只是一个图像。一旦下拉列表出现，我希望能够将鼠标悬停在“登录框”元素（下拉列表）上，而不会消失，这就是现在正在发生的事情。有什么方法可以让它在悬停在触发器和下拉列表上时保持在视图中，并且只有当光标没有悬停在这些元素中的任何一个上时才会消失吗？

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

FIDDLE

Answer 2

您只需在#login-box中添加#login-trigger。

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

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

2 个答案: