在jQuery中覆盖伪风格

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-user样式相同的方式具有相同的链接样式表。

---

或者，通过申请的课程进行 #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的浏览器。这个数字是如此之小，以至于不值得考虑。