jquery - Jq mouseleave 删除背景悬停，防止正常的 css 悬停

Question

我得到了这个带有下拉列表 ul 的导航栏。

<ul class="topbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="services.php" class="fixed_hover">Services</a>
   <ul class="drop_down">
      <li><a href="#">lorem</a></li>
      <li><a href="#">lorem</a></li>
   </ul>
</li>
<li><a href="contact.php">Contact</a></li>
 </ul>

我会为“topbar-nav li”的悬停状态添加 css

ul.topbar-nav a.selected, ul.topbar-nav a:hover{
    color:#000;
    background:url(img/nav_hove.png) no-repeat;
    margin:0;
    padding-top:2px;
    }

这里是下拉/向上滑动下拉菜单的 jq 代码。 (我从教程中获得了这段代码)

function mainmenu(){
$(" .topbar-nav ul ").css({display: "none"});
$(" .topbar-nav li ").hover(function(){
    $(this)
      .find('ul:first:hidden')
      .css({visibility: "visible",display: "none"})
      .slideDown(400);

    },function(){
        $(this)
          .find('ul:first')
          .slideUp(400);
    });
}
$(document).ready(function(){
    mainmenu();
});

现在，一切都很完美，但我希望当您将鼠标悬停在下拉菜单项上时出现 css 悬停规则(它将 nav_hove.png 背景分配给 ul.topbar-nav li)，我做不到用 css 来做，所以我决定自己在 jquery 上尝试，除了当我再次将鼠标悬停在“服务”选项卡上时，没有背景会出现。这是我的凌乱代码:

$(function fixed_hover(){
   $("ul.drop_down li").hover(function fixed_hover(){
            $(".fixed_hover").css('background', 'url(img/nav_hove.png) no-repeat');
        }
    );
});
$(function fixed_hover2(){
      $("ul.drop_down li").mouseleave(function fixed_hover2(){
            $(".fixed_hover").css('background', 'none');
        }
    );
});

我会感谢任何形式的帮助，我会提前感谢你们阅读这么多。如果您需要有关它的更多信息，请告诉我，但我希望我已经说清楚了。

Answer 1

在您的第二个函数中，尝试将属性设置为空值而不是无，如下所示:

$(".fixed_hover").css('background', '');

否则，您已经在为 selected 使用一个类，那么为什么不直接添加和删除它呢？

$(function fixed_hover(){
   $("ul.drop_down li").hover(function fixed_hover(){
            $(".fixed_hover").addClass('selected');
        }
    );
});
$(function fixed_hover2(){
      $("ul.drop_down li").mouseleave(function fixed_hover2(){
            $(".fixed_hover").removeClass('selected');
        }
    );
});