3

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

问题是新添加的类似乎没有“覆盖”现有的 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');
  }
);

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

谢谢!

4

4 回答 4

4

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

.whitebg {
background-color: #fff !important;
}
于 2013-01-11T01:02:36.637 回答
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');
   }
);

检查小提琴

于 2013-01-11T01:04:36.063 回答
0

然后,你需要这样的代码:

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

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

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

于 2013-01-11T01:18:40.687 回答
0

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

于 2013-01-11T01:03:08.927 回答