jQuery悬停时，元素仍然保留悬停类.当鼠标悬停时，应该删除这个类样式

jQuery on hover out the element still retains the hovered class. This class styles should be removed when the mouse is hovered out

本文关键字：悬停 删除 样式 元素 保留 jQuery 鼠标      更新时间：2023-09-26

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

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

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上找到该网页。

谢谢

Try

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

所示

演示:小提琴

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

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

另外，如果你想让你的按钮显示为悬停，在你的CSS选择器'。Login-btn:hover'，更改为:'。login-btn:悬停,.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');
    });
})();
相关文章：