javascript - 悬停在元素上的 jQuery 仍然保留悬停的类。鼠标悬停时应删除此类样式

Question

当鼠标悬停在 .login-content 上时，我希望 login-btn 保持悬停状态。我已经尝试过了，现在它在悬停时显示和隐藏 div，但是当 .login-content 悬停时 login-btn 失去悬停状态，而 .login-content 在悬停时消失。

更新：
当前问题是，如果鼠标悬停在登录名上然后直接悬停..而不是悬停在子元素上，.hovered 样式会保留。这不应该是这样的。

HTML如下：

               <li><a href="#" class="login-btn">Login</a>
                    <div class="login-content">
                        <form name="login-form" action="" method="post">
                            <input type="email" name="email" value="" placeholder="E-mail" />
                            <input type="password" name="password" value="" placeholder="Password" />
                            <input type="submit" name="login" value="Login" class="form-login" />
                        </form>
                    </div>
                </li>

jQuery代码如下：

$(document).ready(function () {

$(".login-btn").hover(
   function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(".login-content").show();
        $(this).addClass('hovered');
    },
    function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(this).data('hoverTimeoutId', setTimeout(function () {

            $(this).removeClass('hovered');
            $(".login-content").hide();
        } ,500));
    });


$('.login-content').hover(
    function(){     
        clearTimeout($(".login-btn").data('hoverTimeoutId'));
    },     
    function(){    
        $(".login-content").hide();
        $(".login-btn").removeClass('hovered');
    });
});   

如果需要进一步调试，也可以在http://www.domainandseo.com/portfolio/1may/index.html找到该网页。

谢谢

Answer 1

尝试

$(".login-btn").hover(
    function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(".login-content").show();
        $(this).addClass('hovered');
    },
    function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(this).data('hoverTimeoutId', setTimeout(function () {
            $(".login-content").hide();
            $(this).removeClass('hovered');
        } ,500));
    });


$('.login-content').hover(
    function(){     
        clearTimeout($(".login-btn").data('hoverTimeoutId'));
    },     
    function(){    
        $(".login-content").hide();
        $(".login-btn").removeClass('hovered');
    });

而不是使用:hoverpsedoclass 使用一个类，如hover将悬停状态分配给 login-btn演示中所示

演示：小提琴

Answer 2

如果您不想担心用户暂时将光标移开，那么我建议您进行更多的状态检查。

此外，如果您希望按钮显示为悬停状态，请在 CSS 选择器“.login-btn:hover”中将其更改为：“.login-btn:hover, .login-btn.hover”

小提琴：http: //jsfiddle.net/qhAus/

(function() {
    var timer = 0,
        open = false,
        loginBtn = $('.login-btn'),
        loginContent = $('.login-content'),
        startTimeout = function(state, duration) {
            timer = setTimeout(function() {
                timer = 0;
                loginContent[state]();
                open = state === 'show';

                if(!open) {
                    // If it's closed, remove hover class
                    loginBtn.removeClass('hover');
                }
            }, duration || 1000);
    };

    loginBtn.hover(function(e) {
        $(this).addClass('hover');

        if(open && timer) {
            // If about to close but starts to hover again
            clearTimeout(timer);
        }

        if(!(open || timer)) {
            // Don't start to open again if already in the process
            startTimeout('show');
        }
    }, function() {
        // When not hovering anymore, hide login content
        startTimeout('hide', 2000);
    });

    loginContent.mousemove(function(e) {
        // If cursor focus on the login content, stop any closing timers
        if(timer) {
            clearTimeout(timer);
        }
    });

    loginContent.mouseleave(function(e) {
        // When cursor leaves login content, hide it after delay
        startTimeout('hide');
    });

})();

Answer 3

利用setTimeout

$(".login-btn").hover(
function() {
   clearTimeout($(this).data('animator'));
   $(this).data('animator', setTimeout(function () {
      $(".login-content").show();
   } ,1000));
},
function() {
   clearTimeout($(this).data('animator'));
   $(this).data('animator', setTimeout(function () {
      $(".login-content").hide();
   } ,1000));
});

http://jsfiddle.net/uDm64/