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作为其他帖子建议但是在CSS中使用!important是一种不良做法。

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');
   }
);

<强> Check Fiddle

Answer 3

只需将！important标记添加到.whitebg类中的背景颜色即可。这应该可以解决你的问题。

Answer 4

然后，你需要这个代码：

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

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

!important将是兼容性问题。

CSS和Jquery：addClass不会覆盖css

4 个答案: