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

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

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

我的css代码是这样的

[css] view
plain copy

.content-top1>p:hover{  

    color: #19b1e8;  

}  

我的js代码 

[html] view
plain copy

$(".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'});  

[html] view
plain copy

}  

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

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

解决方法为：

[css] view
plain copy

.content-top1>p:hover{  

    color: #19b1e8 !important;  

}  

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

本文转自：http://blog.csdn.net/wxl1555/article/details/53037571