css样式表比jquery addClass强吗？

Question

嘿伙计们，这件事让我发疯。我在样式表中定义：

ul#menuCnt li a {
   color:"red";
}

如果我想制作悬停效果，使用 jquery 这不会改变任何颜色。

$("ul#menuCnt li a").hover(function() {
        $(this).addClass("brown");
    }, function() {
        $(this).removeClass("brown");
    });

我真的很困惑。如果我没有在 css 样式表中定义颜色，则悬停效果将起作用。

希望你能帮助我。你们学习 jquery 和 css 对我帮助很大:)

谢谢！

Answer 1

根据CSS优先级，如果你的类.brown在你的CSS文件中定义如下：

.brown{}

里面的规则不会覆盖你的#选择器中的相同规则。

您可以使用 !important 关键字使其覆盖它们。

.brown {
    color: brown !important;
}

尽管这不是最好的解决方案，但它会起作用...您使用的 !important 越少，您的代码就越容易阅读。

请参阅http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html。

Answer 2

你的 CSS 中有 .brown 选择器吗？此外，a 标签可能是一个糟糕的选择，因为它内置了一个非常好的 :hover 选择器。

Answer 3

我没有看到你提到使用 css 来执行此操作的问题，所以为什么不尝试：

ul#menuCnt li a:hover {
   color:"brown";
}

编辑：它实际上应该在 ie6 中工作，因为它是一个锚:) 它比使用 javascript 执行此操作要快得多。

Answer 4

这里有一个非常具体的元素说明符。这被认为比简单的 .brown 类选择器更重要，因此它没有太大作用。

例如，请参阅此网站更多信息

Answer 5

为什么不使用 CSS :hover 伪类？例如：

#menuCnt li a {
    color: "red";
}

#menuCnt li a:hover {
    color: "brown";
}

此外，在选择器中使用“UL”不是必要的。页面上不可能存在 ID 为“menuCnt”的其他元素，因为 ID 属性在 DOM 中必须是唯一的。

Answer 6

我用 IE/FF 做了一些测试，发现在样式表 (ul#menuCnt) 中包含元素的 ID 可以防止 JQuery 覆盖该样式 - 至少使用我使用的方法（toggleClass、addClass、removeClass 等）。

如果将类分配给标签中的元素（而不是在样式表中指定 ID），则可以使用 JQuery 覆盖它。

如果从样式中删除 ID，则可以使用 JQuery 覆盖它（不是很有用，但对于演示行为很有用）。

事实上，如果您将 ID 保留在样式表中并尝试在标记内分配不同的类，您仍然会在样式表中看到与 ID 关联的类。

笔记：
文森特的帖子说明了我们为什么会看到这种行为。

我也同意 exhuma 在 CSS 中使用 :hover 的建议。