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

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

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

我的css代码是这样的

[css]  view plain  copy

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

我的js代码 

[html]  view plain  copy

1. $(".content-top1>p").click(function(){  
2. $(".content-top1>p").css({  
3. 'background': 'white',  
4.  'border': '1px solid #666666',  
5. 'color': '#666666'  
6. });  
7. $(this).css({  
8. 'background': '#19B1E8',  
9. 'border': 'none',  
10. 'color': 'white'});  

[html]  view plain  copy

1. }  

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

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

解决方法为：

[css]  view plain  copy

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

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

本文转自：http://blog.youkuaiyun.com/wxl1555/article/details/53037571