javascript - CSS 和 Jquery：addClass 不覆盖 css

Question

我有一个脚本，可以在悬停时向元素添加一个类。

问题是新添加的类似乎没有“覆盖”现有的 css（即使在我的样式表上，添加的类列在现有 css 的下方）。

我不能在元素上使用 removeClass，因为没有实际的初始类样式元素。

需要覆盖的“初始”样式是：

#menu ul li ul li {
background-color: #ccc;
}

需要添加的类是：

.whitebg {
background-color: #fff;
}

我的脚本是：

$('#menu ul li ul li').hover(
function() {
    $(this).addClass('whitebg');
},
function () {
    $(this).removeClass('whitebg');
  }
);

有谁知道我可以解决这个问题的方法？

谢谢！

Answer 1

id选择器优先于class选择器。你需要!important

.whitebg {
background-color: #fff !important;
}

Answer 2

这是因为特殊性。您可以!important按照其他帖子的建议使用，但!important在您的 CSS 中使用是一种不好的做法。

Use that as you last option.

而是使用两个类..

确保最里面的 li 有default它的类..

$('#menu ul li ul li').addClass('default').hover(
   function() {
      $(this).addClass('whitebg').removeClass('default');
   },
   function () {
      $(this).removeClass('whitebg').addClass('default');
   }
);

检查小提琴

Answer 3

然后，你需要这样的代码：

#menu ul li ul li {
  background-color: #ccc;
}
#menu ul li ul li.whitebg {
  background-color: #fff;
}

只有这样，我们才能有一个共同的父类。

!important将是一个兼容性问题。

Answer 4

只需将 !important 标签添加到 .whitebg 类中的背景颜色。那应该可以解决您的问题。