jquery - 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 帮助了我很多:)

谢谢！

score 10 · Accepted Answer

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

.brown{}

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

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

.brown {
    color: brown !important;
}

虽然这不是最好的解决方案，但它会起作用......你使用的越少！important，你的代码就越容易阅读。

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

参见例如这个网站了解更多信息

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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

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

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

注意：Vincent 的帖子说明了我们看到这种行为的原因。

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

6 回答 6