Question

我目前正在使用以下内容：

$("li.nav-shop-sub").hover(function () {
    $(this).toggleClass("is-active");
    $("li.is-active a").next().css( "background-color", "red" );
});

然而，即使在用户停留在li上并且移除了is-active类之后，它仍然将背景颜色保留为红色。如何在moouseout上将背景颜色恢复为默认值？

HTML：

<li class="nav-shop-sub">
  <a href="link">link</a>
  <div class="grid nav-shop-wrapper has-product-noms">
    <ul class="grid-item list-stacked link-list">
     <li><a href="link">link</a></li>
     <li><a href="link">link</a></li>
     <li><a href="link">link</a></li>
     <li><a href="link"link</a></li>
     <li><a href="link">link</a></li>
     <li><a href="link">link</a></li>
     <li><a href="link">link</a></li>
    </ul>
  </div>
</li>

Answer 1

这是我的工作示例：

http://jsfiddle.net/washington_guedes/mc9apah9/

$("li a").hover(function(){

    /* do something to this li */
    $(this/*a*/).parent(/*li*/).toggleClass("active");

    /* do something to this a */
    $(this/*a*/).toggleClass("active");

    /* do something to the next a */
    $(this/*a*/).next(/*a*/).toggleClass("bgRed");

});

Answer 2

您可以在hover()上添加回调函数，如下所示：

$("li.nav-shop-sub").hover(
    function () {
        $(this).toggleClass("is-active");
        $("li.is-active a").next().addClass('red');
    },
    function() {
        $("li.is-active a").next().removeClass('red');
    }
);

<强> CSS：

.red {
    background-color: red;
}

有关hover jQuery

的更多信息

Answer 3

您可以将背景颜色放在.is-active

类上

li.nav-shop-sub.is-active a {
    background-color: red;
}

在JS中，只需切换课程：

$("li.nav-shop-sub").hover(function () {
    $(this).toggleClass("is-active");    
});

Answer 4

实际上，jquery中的.hover（）不能正常工作：hover in css
如果你想在jquery中使用.hover（），你应该使用切换一切
或者你可以使用.mouseenter（）然后使用.mouseleave（）来返回你的值回

在mouseout上jQuery默认返回原始CSS

4 个答案: