CSS和Jquery：addClass不覆盖css

我有一个脚本，它将一个类添加到悬停的元素上。CSS和Jquery：addClass不覆盖css

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

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

谢谢！

来源

2013-01-11 MeltingDog

如果存在多个针对相同规则的规则，则需要了解[CSS特异性]（http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/）具有不同选择器的对象。 – jfriend00

关于CSS的特殊性，一个很好的小工具比较两个选择器的重量时有疑问http://specificity.keegan.st/ – Nobita

为什么使用jQuery'.hover（）'方法呢？改为使用CSS伪选择器'：hover'。我的3级菜单（带菜单的子菜单的菜单栏）需要准确的零线。你的CSS可以有不同颜色的'#menu ul li li ul'和'#menu ul li li li：hover'。由于我们在导航过程中改变颜色的方式，我们也有'#menu ul li：hover ul li'和'#menu ul ul li li：hover li'规则。我们稍后*用javascript *定时器*增强了菜单*，所以当鼠标在矩形外漂移时，菜单不会快速关闭。 –

这是因为特异性。您可以使用!important作为其他帖子建议，但使用!important在您的CSS是坏习惯。

Use that as you last option.

而是使用两类..

确保内最里有default类吧..

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

Check Fiddle

来源

2013-01-11 01:04:36

谢谢 - 我同意这一点，但对我而言，不幸的是，我使用的CMS使得难以直接将类应用于该特定元素。我可以使用JQuery来应用这个类，但这需要完全依赖于JavaScript。这就是说，在你看来，你认为哪个更强大：完全依赖JQuery或依赖！important？ – MeltingDog

如果你想让事情变得非常快速和肮脏，那么'重要'是要走的路。否则，我会依赖于JavaScript ..你只需要一个额外的'addClass'在同一个选择器中..我已经更新了这篇文章和小提琴以供您参考 –

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

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

来源

2013-01-11 01:02:36

更准确地说，“在选择器中，'id'比'class'具有更高的特异性 - ”事实是，更具体的选择器优先于不太具体的选择器。 –

简单的！重要的标记添加到.whitebg类的背景色。这应该能解决你的问题。

来源

2013-01-11 01:03:08

然后，你需要代码为：

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

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

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

来源

2013-01-11 01:18:40 jikey

CSS和Jquery：addClass不覆盖css

回答

相关问题