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

xiaoxiao2024-03-09 132

我的思维大概是这样的-----有一个导航栏，用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样式权重是最高的