3

其他编码人员，刚刚遇到了 .addClass 方法的奇怪（至少对我而言）行为。当鼠标悬停在项目（div）上时，我试图通过使用 .addClass 方法和更改 div 的背景颜色的 .highlight 类来突出显示项目（div）。（我使用 jQuery 而不是 css :hover 方法是有原因的。）

代码有效， .highlight 类被添加到 div 但颜色没有改变。只有当 div 的默认 css 类中没有定义背景颜色时，颜色才会改变。换句话说，如果 div 是用一个包含 say background-color: white; 的类定义的。添加了 .highlight 类，但颜色没有改变。

这是正常的还是我错过了什么？现在，我正在使用 .css('background-color', ....) 来突出显示，但我很好奇为什么 .addClass 方法不起作用。

谢谢。

4

5 回答 5

11

你原来的 CSS 类覆盖了新的。

您可以通过添加!important到悬停规则，或使其选择器更具体，或将其移动到 CSS 中的原始类之后来防止这种情况。

于 2011-02-01T16:25:10.457 回答
2

也许您应该尝试!important在 CSS 中设置标志。

.highlight {
  background-color: #ff0000 !important;
}
于 2011-02-01T16:25:26.227 回答
2

我怀疑问题在于原始背景颜色是如何应用的，并且与级联优先级和特异性有关。原始背景颜色的 CSS 选择器可能比类更具体并且优先。例如，通过 id 或在 DOM 中的位置指定元素的选择器比简单的类指示符更具体。进行类声明!important或减少原始 CSS 选择器的特异性（如果可能）都应该有效。

于 2011-02-01T16:33:01.623 回答
1

尝试

background-color:#f00 !important;
于 2011-02-01T16:25:05.253 回答
1

如果您有两个类，并且它们都指定了背景颜色，那么使用哪种颜色取决于定义这两个类的样式的位置。

于 2011-02-01T16:25:46.647 回答