Question

我想将此代码更改为鼠标悬停。

// Login Form

$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function() { 
        return false;
    });
    $(this).mouseup(function(login) {
        if(!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

当它们悬停在登录框和登录表单上时，它应该是可见的，否则登录表单应该被隐藏。现在当我们点击它时它会显示出来，当我们再次点击它时它会隐藏。

Answer 1

您想使用mouseover和mouseout代替mouseup：

$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
    button.mouseover(function() {
        box.show();
        button.addClass('active');
    });
    button.mouseout(function() {
        box.hide();
        button.removeClass('active');
    });
});

来自文档：

当鼠标指针进入元素时，鼠标悬停事件将发送到元素。任何HTML元素都可以接收此事件。

和

当鼠标指针离开元素时，mouseout事件将发送到元素。任何HTML元素都可以接收此事件。

这是一个简单的jsFiddle来演示：

http://jsfiddle.net/bryanjamesross/58TqM/1/

注意：您可能希望将这些事件附加到框和按钮的公共父级，以便在鼠标指针离开按钮时框不会隐藏。由于父容器在显示时会展开以适合框，因此您将能够与表单进行交互，直到鼠标离开父容器区域。

*编辑*：这是使用CSS实现预期效果的更新版本，而不是手动显示/隐藏表单：http://jsfiddle.net/bryanjamesross/58TqM/2/

Answer 2

只需使用mouseenter和mouseleave。最后一个事件处理程序似乎在它外面点击时关闭了loginBox，你真的不需要它，但是将它作为一个额外的预防措施是没有害处的，所以如果由于某种原因mouseleave失败，用户可以关闭该框：< / p>

$(function() {
    var button = $('#loginButton'),
        box    = $('#loginBox'),
        form   = $('#loginForm');

    button.removeAttr('href').on('mouseenter mouseleave', function(e) {
        box.toggle();
        button.toggleClass('active');
    });

    $(document).on('click', function(e) {
        if( !($(e.target).closest('#loginButton').length)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

Answer 3

当鼠标悬停在#loginform上时，您需要添加一个事件。我建议使用mouseenter，因为鼠标悬停很吵，当你从窗体中的一个子元素移动到另一个子元素时，它会不止一次触发，并且当与mouseout一起使用时会引起闪烁。

$('#loginForm').mouseover(function() {
     button.toggleClass('active');
}
$('#loginForm').mouseleave(function() {
     button.toggleClass('active');
};

离开时你可能还需要mouseout（）我不确定你什么时候要发射那个事件？从你的问题。

如何将此代码更改为鼠标悬停

3 个答案: