Question

如何用jQuery覆盖下面的CSS？

（动画没有运行，只是瞬间切换。）

menu span ul {display: none;}
menu span:hover ul {display: block;}

$('#menu span').mouseenter(function(){
    $('#menu span ul').slideDown('fast');
}).mouseleave(function(){
    $('#menu span ul').slideUp('fast');
});

Answer 1

优雅降级的一个技巧是不必覆盖样式，如下所示：

<noscript>
  <style type="text/css">#menu span:hover ul {display: block;}</style>
</noscript>

对所有这些非JS用户样式都有相同的链接样式表。

或者，通过您应用于#menu的类可以删除，以便规则不再匹配，如下所示：

#menu span ul {display: none;}
#menu.noJS span:hover ul {display: block;}

在你的脚本中删除该类：

$("#menu").removeClass("noJS");

作为旁注，您可以使用.hover()和.slideToggle()缩小代码，如下所示：

$('#menu span').hover(function(){
  $(this).find('ul').slideToggle('fast');
});

Answer 2

你没有看到动画，因为你的CSS正在覆盖它。

删除

menu span:hover ul {display: block;}

我不打算尝试覆盖css以适应没有启用js的浏览器。这个数字很小，不值得考虑。

覆盖jQuery中的伪样式

2 个答案: