本文共 639 字，大约阅读时间需要 2 分钟。
我的思维大概是这样的-----有一个导航栏，用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样式权重是最高的
转载地址：http://pndma.baihongyu.com/