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

时间:2013-05-01 00:52:00

标签: javascript jquery html

当鼠标悬停在.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找到该网页。

由于

3 个答案:

答案 0 :(得分:2)

尝试

$(".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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

})();