0

我有一个 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');
    });

});
4

3 回答 3

3

最初的问题是函数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');
    });

});
于 2013-05-01T17:25:43.407 回答
1

我猜你正在失去函数$(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));
    });
于 2013-05-01T17:23:16.547 回答
0

.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/

方法二：

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/

于 2013-05-01T17:23:25.273 回答