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

不使用:hover psedoclass，而是使用像hover这样的类来指定悬停状态 login-btn，如演示

所示

演示：Fiddle

Answer 2

使用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/

Answer 3

如果您不想担心用户暂时离开光标，那么我建议您再进行一次状态检查。

此外，如果您希望按钮显示为悬停，请在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');
    });

})();

jQuery在悬停元素时仍然保留了悬停类。鼠标悬停时，应删除此类样式

3 个答案: