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

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



上一篇:PMC:以20G芯片提速分组和光网络融合


下一篇:阿里联合ICA联盟发布IoT系列标准,智能门锁标准首批授权测试机构名单出炉