Question

我有一个jquery脚本，它应该在悬停在按钮上时显示一个内容框..并且还打开了悬停的按钮类。当鼠标悬停在刚刚触发显示的按钮div内时，该按钮仍应保留其悬停样式。但是每当鼠标悬停时，.hovered类也应该被删除。目前，当您将鼠标悬停在按钮上并悬停而不悬停在子元素上时，仍会保留.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');
    });

});

Answer 1

最初的问题是this函数中setTimeout的上下文不是悬停的元素。相反，通过首先将其分配给变量来保持上下文。：

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

});

Answer 2

我猜你在$(this)函数中丢失了setTimeout范围。你能试试这个简单的替代品，看看它是否有任何影响？

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

Answer 3

您可能想尝试.hover()，而不是使用始终触发mouseout事件的.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/

悬停的jQuery仍然保留其悬停样式

3 个答案: