jQuery在悬停时仍然保留其悬停样式

jQuery on hover out still retains its hover styles

本文关键字：悬停 保留 样式 jQuery      更新时间：2023-09-26

我有一个jquery脚本，应该在按钮悬停时显示一个内容框。悬停的按钮类也打开了。当鼠标停留在刚刚触发显示的按钮div内时，按钮应该仍然保持其悬停样式。但是每当鼠标悬停时，.hover类也应该被移除。目前，当您将鼠标悬停在按钮上，然后将鼠标悬停在子元素上而不悬停时，.hover类仍然保留。

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

最初的问题是setTimeout函数中this的上下文不是悬停的元素。相反，应该先将上下文赋值给一个变量来持久化上下文。:

$(document).ready(function () {
$(".login-btn").hover(
   function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(".login-content").show();
        $(this).addClass('hovered');
    },
    function() {
        var $this = $(this);
        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');
    });
});

我猜你在setTimeout函数内失去了$(this)范围。你能试试这个简单的替代品，看看是否有效果吗?

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

如果页面上有多个.login-btn，这可能不是最优雅的解决方案，因为它可能会蚕食其他元素的悬停。如果是这种情况，您可以尝试:

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

与其使用总是触发mouseout事件的.hover()，不如试试.mouseenter.()。

在一个事件中，您可以清除活动状态并将其应用于当前状态。

var initVideos = function () {
    var divs = $("ul li a");
    // bind your hover event to the divs
    divs.mouseenter(function () {
        flashembed("videoArea", $(this).prop("href"));
        divs.removeClass("active");
        $(this).addClass("active");
    });
};
// once all is loaded
$(window).load(function () {
    initVideos();
});
演示:

http://jsfiddle.net/tive/Ff7Mq/

方法2:

var btn = $(".login-btn"),
    content = $(".login-content"),
    triggers = btn.add(content);
triggers.mouseenter(function() {
    content.show();
    triggers.addClass('hovered');
});
content.mouseleave(function(){
    $(this).hide(500);
    btn.removeClass('hovered');
});
演示:

http://jsfiddle.net/tive/GkVN3/

相关文章：