覆盖 jQuery 中的伪样式

发布于 2024-09-14 11:08:19 字数 300 浏览 8 评论 0原文

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

原文

How can I overwrite the CSS below with jQuery?

(The animations aren't being run and it's just an instantaneous switch.)

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多像笑话 2024-09-21 11:08:19

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

<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");

作为旁注，您可以 slim使用 .hover() 和 .slideToggle() 像这样：

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

One trick for graceful degredation is to not have to override the styles, like this:

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

Of have a linked stylesheet the same way with all of these for-non-JS-user styles.

Or, do it via a class you apply to #menu that you can remove so the rules no longer match, like this:

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

And in your script just remove that class:

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

As a side note, you can slim down your code using .hover() and .slideToggle() like this:

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

回复收藏 0 原文

凉墨 2024-09-21 11:08:19

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

删除

menu span:hover ul {display: block;}

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

You're not seeing the animation because your css is overriding it.

Remove

menu span:hover ul {display: block;}

I wouldn't bother trying to override the css to accommodate browsers that don't have js enabled. The number is so small that it isn't worth consideration.

回复收藏 0 原文

~没有更多了~