覆盖jQuery中的伪样式答案

【问题标题】：Overriding pseudo styles in jQuery覆盖jQuery中的伪样式
【发布时间】：2011-03-30 18:13:28
【问题描述】：

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

【问题讨论】：

标签： jquery css progressive-enhancement graceful-degradation

【解决方案1】：

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

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

Of 有一个链接样式表，与所有这些非 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');
});

【讨论】：

【解决方案2】：

您没有看到动画，因为您的 css 覆盖了它。

删除

menu span:hover ul {display: block;}

我不会费心尝试覆盖 css 以适应没有启用 js 的浏览器。这个数字太小了，不值得考虑。

【讨论】：