css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？...

原文链接： https://yq.aliyun.com/articles/91340

我的思维大概是这样的-----有一个导航栏，用css写了hover事件，鼠标放上去会变成蓝色；

下面就有一个需求，点击导航某一项页面不会跳转，还在本页面，点击哪一个让哪一个变成蓝色，其余的为灰色的，但是当我点击完成之后，hover事件就会失效，不起作用了，

我的css代码是这样的

.content-top1>p:hover{
	color: #19b1e8;
}

我的js代码 

$(".content-top1>p").click(function(){
$(".content-top1>p").css({
'background': 'white',
 'border': '1px solid #666666',
'color': '#666666'
});
$(this).css({
'background': '#19B1E8',
'border': 'none',
'color': 'white'});

}

先让所有的变灰，再点击那个让那个变蓝；

但是：当你点击某一个之后点击的那个确实变蓝色了，其余也变灰了，但是hover失效了，我找了好多资料，经过分析之后得出结论为：js操作的权重比外部css样式的权重高，刚开始没有点击，js没有执行，但是点击后js执行了，所以css代码就失效了。

解决方法为：

.content-top1>p:hover{
	color: #19b1e8 !important;
}

这样就解决这个问题了，因为带 ! important的css样式权重是最高的