Javascript hover out上的jQuery仍然保留其悬停样式

我有一个jquery脚本，当鼠标悬停在按钮上时，它应该显示一个内容框。。悬停的button类也处于启用状态。当鼠标悬停在刚刚触发显示的按钮div内时，按钮仍应保持其悬停样式。但是，每当鼠标悬停时，也应删除.hovered类。当前，当您将鼠标悬停在按钮上，并将鼠标悬停在关闭位置而不悬停在子元素上时，.hovered类仍然保留。这需要删除

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

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>

---

我猜您在

setTimeout

函数中丢失了

$（this）

范围。你能试试这个简单的替代品，看看是否有效果吗

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

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

，这可能不是最优雅的解决方案，因为它可能会破坏其他元素的悬停。如果是这种情况，您可以尝试：

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

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

---

我猜您在

setTimeout

函数中丢失了

$（this）

范围。你能试试这个简单的替代品，看看是否有效果吗

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

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

，这可能不是最优雅的解决方案，因为它可能会破坏其他元素的悬停。如果是这种情况，您可以尝试：

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

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

）

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

在一种情况下，您可以清除活动状态并将其应用于当前状态

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

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

演示：

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

方法2:

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

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

---

演示：

您可以尝试一下

.mouseenter.（

），而不是使用总是触发mouseout事件的

.hover（）

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

在一种情况下，您可以清除活动状态并将其应用于当前状态

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

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

演示：

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

方法2:

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

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

---

演示：

最初的问题是

setTimeout

函数中的

此

的上下文不是悬停的元素。相反，请先将上下文赋给一个变量来持久化上下文：

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

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

函数中

此

的上下文不是悬停的元素。相反，请先将上下文赋给一个变量来持久化上下文：

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

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

});  

---

---

这就产生了另一个问题，即一旦鼠标从登录btn上悬停下来，就会出现问题。。登录内容会在一秒钟后自动隐藏，悬停在上面是没有用的。它们是两个不同的元素，

.login content

和

.login btn

，因此我不认为我完全理解新问题是什么？登录内容在.login btn内。当鼠标悬停在登录btn上时，将显示登录内容，登录btn将获得.hovered类。当鼠标从登录btn悬停时，登录btn将丢失其.hover类。类似地，当鼠标悬停在.login内容上时，.login btn应获得.hovered类。当鼠标悬停时，它将丢失其.hovered类。希望您能理解：）好的，我知道您想要什么，但是在您的HTML

。登录内容
不是
的子项。登录btn
，它们都是
元素的子项。这会产生另一个问题，即鼠标从登录btn悬停时。。登录内容会在一秒钟后自动隐藏，悬停在上面是没有用的。它们是两个不同的元素，
.login content
和
.login btn
，因此我不认为我完全理解新问题是什么？登录内容在.login btn内。当鼠标悬停在登录btn上时，将显示登录内容，登录btn将获得.hovered类。当鼠标从登录btn悬停时，登录btn将丢失其.hover类。类似地，当鼠标悬停在.login内容上时，.login btn应获得.hovered类。当鼠标悬停时，它将丢失其.hovered类。希望你能理解：）好的，我知道你想要什么，但是在你的HTML
中。登录内容
不是
的子项。登录btn
，它们都是
元素的子项。但是当鼠标从登录btn上悬停时，我需要鼠标，除非它悬停在login-btn中的弹出div的登录内容上。但是当鼠标悬停在login-btn上时，我需要一个鼠标出，除非它悬停在login-btn中的弹出div的登录内容上。我发现真正奇怪的是，我把你的代码放到了一个JSFIDLE中，它工作得非常好。。。尝试向登录btn添加背景色。。然后将鼠标悬停在它上面，这样它将获得一个悬停类。。并且颜色将更改为指定的样式。现在，如果你在没有悬停在内部元素上的情况下悬停，颜色不会消失，这意味着它仍然保持其风格，除非你在子元素上悬停然后关闭。格林恩把它点上了。啊，我明白了。好吧，既然这个问题已经解决了，我已经更新了我的JSFIDLE，以反映下面的正确代码，供将来的搜索者使用。我发现真正奇怪的是，我把你的代码放进了JSFIDLE，它工作得非常好。。。尝试向登录btn添加背景色。。然后将鼠标悬停在它上面，这样它将获得一个悬停类。。并且颜色将更改为指定的样式。现在，如果你在没有悬停在内部元素上的情况下悬停，颜色不会消失，这意味着它仍然保持其风格，除非你在子元素上悬停然后关闭。格林恩把它点上了。啊，我明白了。好吧，既然这个问题已经解决了，我已经更新了我的JSFIDLE，以反映下面的正确代码，供将来的搜索者使用。哇。。这很有效。。非常感谢苏。即使您错误地使用了“$loginBtn.hover”而不是“$（“.login btn”）.hover”。再次感谢。好的，很好。我修好了。所以你没有把它藏起来的问题