Question

嘿伙计这件事让我抓狂。我在样式表中定义了：

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

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

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

我真的很困惑。如果我没有在我的css样式表中定义颜色，那么hovereffect就可以了。

希望你能帮助我。你们通过学习jquery和css来帮助我这么多：）

谢谢！

Answer 1

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

.brown{}

里面的规则不会覆盖#selector中的相同规则。

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

.brown {
    color: brown !important;
}

尽管这不是最好的解决方案，但它会起作用......你使用的越少！重要的是，你的代码越容易阅读。

Answer 2

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

Answer 3

我没有看到你提到使用css这样做的问题，所以为什么不尝试：

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

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

Answer 4

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

例如，请参阅this网站了解更多信息

Answer 5

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

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

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

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

Answer 6

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

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

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

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

注意：文森特的帖子暗示了我们为什么会看到这种行为。

我也同意exhuma的使用建议：将鼠标悬停在你的CSS中。